Aligning Div Boxes CSS - html

Question

I would like to align the divs in a way that on the left there is a big expandable box like the ones you can see and the 2 aligning ones one on top of the other on the right right by it
Imagine, instead of boxes 1&3 that you see in the code I've written, to have them as 1 big box and the other 2&4 stay as they are aligned to the big box.
I've been playing around with the flex command but cant get it to work
every time I use the flex commands it doesn't align properly and becomes a pyramid
If someone can help me out and explain it to me I'd appreciate it as I don't understand how to get it to work
.Scrollbox h1 {
color: #ffffff !important;
}
.scroll-con {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.Scrollbox {
background: rgba(130, 164, 179,0.6);
border: 1px solid #ffffff;
overflow-y: scroll;
width: 300px;
height: 250px;
transition: height 1s ease;
overflow: hidden;
text-align: center;
color: #ffffff;
font-family: 'Poiret One', cursive;
}
.Scrollbox:hover {
height: 500px;
overflow-y: hidden;
}
<div class="scroll-con">
<div class="Scrollbox">1</div>
<div class="Scrollbox">2</div>
<div class="Scrollbox">3</div>
<div class="Scrollbox">4</div>
</div>

Answer 1

From what I understand, you want 1&3 to be one long box and 2&4 to be 2 individual boxes beside it?
You can split them up into two different divs where 2&4 will be children of the right div.
.container {
display: flex;
}
.container>div {
flex: 1;
}
.left {
background: pink;
min-height: 500px
}
.right {
display: flex;
flex-direction: column;
background: blue;
}
.right>div {
flex: 1;
}
.right>div:first-child {
background: yellow;
}
.right>div:last-child {
background: gold;
}
<div class="container">
<div class="left">1 & 3</div>
<div class="right">
<div>2</div>
<div>4</div>
</div>
</div>
Alternatively, you can use grid to do the same.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.left {
min-height: 500px;
grid-row-start: 1;
grid-row-end: 3;
background-color: pink;
}
.left+div {
background-color: yellow;
}
.left+div+div {
background-color: gold;
}
<div class="container">
<div class="left">1 & 3</div>
<div>2</div>
<div>4</div>
</div>