JSFiddle - React, Tailwind, and code Playground

by Valentin Sarychev

HTML

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS

.grid {
  display: grid;
  gap: 4px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.grid > *:nth-child(1) {
  grid-column: 1 / 3;
}

.grid > *:nth-child(2) {
  grid-column: 2 span;
}

.grid > *:nth-child(3) {
  grid-column: 1;
}

.grid > *:nth-child(4) {
  grid-column: 2;
}

.grid > *:nth-child(5) {
  grid-column: 2 span;
}

.item {
  height: 50px;
  border: 1px solid black;
  grid-auto-flow: 1px;
}