JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="block block__small">1</div>
  <div class="block block__small">2</div>
  <div class="block block__small">3</div>
  <div class="block block__small">4</div>
  <div class="block block__big">5</div>
  <div class="block block__small">6</div>
  <div class="block block__small">7</div>
</div>

CSS

* { margin: 0; padding: 0; }
.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: 200px;
}
.block {
  width: 25%;
  height: 100px;
  background: pink;
  border: 1px solid #000;
  box-sizing: border-box;
}
.block__big {
  height: 200px;
}