I used to be not so long back ago a person who was scared of CSS until I used to treat CSS as a game. Treating it as a game made me feel more attracted to dive into it and I enjoyed it. Flexbox froggy and Grid Garden Css game made me feel good about CSS and by the magic of a google search I came to know of Cssbattle It was the challenging platform that gave me intristic joy of achieving CSS Targets.
I want to bring the same joy to you. Here We will achieve targets on CSS battle for our happiness.

Thanks

I thank Olzhas Askar due to whom I got the idea of writing this series. He has written a series of CSS Batlle solutions with different solutions for each problem giving you a wider perspective and practically demonstrating that in code you can achieve your goal in multiple ways.
Link to Olzhas amazing series: https://dev.to/pheeria/css-battle-1-simply-square-c19

Goal

From careful observing the target, we can guess some attribute for the target which are :-
1 The flow of rectangles in the normal document flow which is top to bottom.
2 Body tag adds some margin which should be zero for the above goal.
3 We also realize that boxes are 100% width with varying heights so We need to determine the heights of 4 rectangles. As per CSS battle, the height is 300px of the target which is divided between 4 rectangles. With Basic Maths we can make a fair guess about height which is

50px+50px+100px+100px = 300px 

Combining the above insights we can figure out the code looks similar to it

<div></div> <div></div> <div></div> <div></div> <style> body { margin: 0px } div { width: 100% } div:first-child { background: #F7EC7D; height: 50px } div:nth-child(2) { height: 50px; background: #E38F66 } div:nth-child(3) { height: 100px; background: #AA445F } div:nth-child(4) { height: 100px; background: #62306D } </style> 

Question after who had achieved your target:-
How much time did you take to achieve the target and did you feel good after its achievement?