How am I going to make this CSS - html

Question

How am I going to turn
into
I tried to use justify-content: space between; and seperated the blocks, but how am I going to align 3 and 4 to the bottom of the container
CSS Code
.container {
width: 240px;
height: 200px;
border: 1px solid gray;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.container > div {
width: 80px;
height: 50px;
border: 1px solid red;
}

Answer 1

Assuming all these sizes are hard coded, you could do something like this.
* {
box-sizing: border-box;
}
.container {
width: 240px;
height: 200px;
border: 1px solid gray;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
.container > div {
width: 80px;
height: 50px;
border: 1px solid red;
flex-shrink: 0;
}
.container > div:nth-child(1),
.container > div:nth-child(2),
.container > div:nth-child(5) {
order: -1;
}
.container > div:nth-child(5) {
margin-inline: 80px;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

Answer 2

If only the size of your inside boxes are fixed you can use this solution.
.parent {
display: flex;
justify-content: space-between;
width: 100%;
height: 80vh;
border: 1px solid black;
position: relative;
resize: both;
}
div {
display: inline-block;
width: 100px;
height: 30px;
border: 1px solid red;
}
.three {
position: absolute;
bottom: 0%;
}
.four {
position: absolute;
bottom: 0%;
right: 0%;
}
.five {
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
<div class="parent">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>