There is a container of width: 600px and height: 200px and its child elements i.e. four boxes are present inside it each having a border of 1px. The child elements i.e. boxes present inside the container has widths and heights as mentioned in the HTML code snippet below.
After applying widths to the child elements there is some space left inside the container.
A challenge: Just by looking at the output image below, modify the code below and try to achieve the same output. Use your own IDE, play with the values, and try to solve this task by looking at the output image below. If not, you can go ahead and read the description below to get some more clarity.
Modify the code below such that the third-box takes the thrice of available space, fourth-box takes the double of available space as taken by the first-box and second-box, and the other remaining space inside the container is taken up by the first-box and second-box in equal proportion.