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?