<div class="wrap">
<div class="wrap-left">
<div class="item">1</div>
</div>
<div class="wrap-right">
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
</div>
.wrap {
display: flex;
gap: 15px;
}
.wrap-left, .wrap-right {
flex-basis: 0;
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 15px;
}
.item {
flex-basis: 0;
flex-grow: 1;
background: #444;
font-size: 20px;
font-weight: 700;
line-height: 1;
color: yellow;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.