JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cols">
  <div class="col">
    <div class="block big">1</div>
  </div>
  <div class="col">
    <div class="block">2</div>
    <div class="block">3</div>
  </div>
  <div class="col">
    <div class="block">4</div>
    <div class="block">5</div>
  </div>
  <div class="col">
    <div class="block">6</div>
    <div class="block">7</div>
  </div>
</div>

CSS

.cols
{
  display: flex;
}

.cols .col
{
  display: flex;
  flex-direction: column;
  width: 240px;
}

.cols .col + .col
{
  margin: 0 0 0 20px;
}

.cols .block
{
  align-items: center;
  background: #f90;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  height: 240px;
  width: 240px;
}

.cols .block.big
{
  margin: 80px 0 0;
}

.cols .block + .block
{
  margin: 20px 0 0;
}

.col:nth-child(1) .block
{
  order: 0;
}

.col:nth-child(2) .block:nth-child(1)
{
  order: 1;
}

.col:nth-child(3) .block:nth-child(1)
{
  order: 2;
}

.col:nth-child(4) .block:nth-child(1)
{
  order: 3;
}

.col:nth-child(2) .block:nth-child(2)
{
  order: 4;
}

.col:nth-child(3) .block:nth-child(2)
{
  order: 5;
}

.col:nth-child(4) .block:nth-child(2)
{
  order: 6;
}