<div class="flex gap-1">
<div class="f1 flex flex-1 gap-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="f2 item flex-1">4</div>
</div>
.flex {
display: flex;
}
.gap-1 {
gap: 5px;
}
.item {
height: 20px;
background: red;
width: 100%;
}
.flex-1 {
flex:1;
}
.f1 { flex-grow: 3; }
.f2 { flex-grow: 1; }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.