JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <div class="column">
    <div class="box_long"></div>
    <div class="box_big"></div>
  </div>
  <div class="column">
    <div class="box_small"></div>
    <div class="box_small"></div>
    <div class="box_small"></div>
    <div class="box_small"></div>
    <div class="box_long"></div>
  </div>
</div>

CSS

.block {
  display: flex;
  height: 100vh;
  background: grey;
}

.column {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
}

.box_big {
  flex-basis: 100%;
  height: 70%;
  background-color: chartreuse;
  border: solid 1px black;
}

.box_small {
  flex: 0 0 50%;
  height: 35%;
  background-color: aqua;
  border: solid 1px black;
}

.box_long {
  flex-basis: 100%;
  height: 30%;
  background-color: violet;
  border: solid 1px black;
}

* {
  margin: 0;
  box-sizing: border-box;
}