Flex left element position to the top - css

Question

How can I place the blue box next to red box at the top. The yellow box should be below the blue box.
I cannot change the HTML structure. And also I cannot use margin-top for the blue box because the height of the boxes will change dynamically.
Please help me! Thanks!
Here is my code:
.wrapper {
width: 80%;
margin: 0 auto;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
.item {
float: left;
padding: 0 8px;
box-sizing: border-box;
}
.item1 {
width: 60%;
height: 400px;
background-color: red;
}
.item2 {
width: 60%;
height: 100px;
background-color: green;
}
.item3 {
width: 30%;
height: 200px;
background-color: blue;
}
.item4 {
width: 30%;
height: 500px;
background-color: yellow;
}
<div class="wrapper">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>

Answer 1

there is a typo error in your CSS file.
in your second item selector, you wrote itme2, and here is the problem.
❌.itme2 {...}
✅.item2 {...}
the logic is fine! is just a typo
.wrapper {
width: 80%;
margin: 0 auto;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
.item {
float: left;
padding: 0 8px;
box-sizing: border-box;
}
.item1 {
width: 60%;
height: 400px;
background-color: red;
}
.item2 {
width: 60%;
height: 100px;
background-color: green;
}
.item3 {
width: 30%;
height: 200px;
background-color: blue;
}
.item4 {
width: 30%;
height: 500px;
background-color: yellow;
}
<div class="wrapper">
<div class="item item1"></div>
<div class="item itme2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>