How can I fix column spanning issue in css flex box - css

Question

check image for better understanding
I want box three(blue) to come right below box one(red) currently white space inbetween them.
Here, the content height of the box two(gree) is greater than box one hence stretching that extra space. I need to cover up that empty white space .
I can not use GRID here, as I already used react-bootstrap Row/Col on my entier react site.
https://codesandbox.io/s/suspicious-david-i2vnht?file=/src/index.js:23-322
I used flexbox and tried using
aligh-items:flex-start/flex-end
does not work.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
}
#app {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.one,
.two,
.three,
.four {
flex-grow: 1;
}
/* .one,.two,.three,.four, .five,.six{
flex-grow:1;
width:33%;
} */
.one {
background: red;
padding: 50px;
order: 0;
width: 67%;
}
.two {
background: green;
order: 1;
padding: 1rem;
width: 33%;
height: 30vh;
}
.three {
background: blue;
order: 2;
width: 67%;
height: 50vh;
}
.four {
background: tomato;
order: 3;
width: 33%;
}
.five {
background: goldenrod;
order: 1;
}
.six {
background: orange;
order: 0;
}
<div id="app">
<div class="one">ONE</div>
<div class="three">THREE</div>
<div class="two">Two</div>
<div class="four">FOUR</div>
<!-- <div class="five">Five</div> -->
<!-- <div class="six">Six</div> -->
</div>