<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; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.