JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="flex">
    <div class="flex column-reverse bkg-red">
      <span>0</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>

    <div class="flex column">
      <div class="bkg-blue"></div>

      <div class="bkg-purple"></div>

      <div class="bkg-blue"></div>

      <div class="flex bkg-yellow">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
      </div>

    </div>
  </div>
</div>

CSS

.container {
  display: inline-block;
}

.flex {
  display: flex;
}

.flex.column {
  flex-direction: column;
}

.flex.column-reverse {
  flex-direction: column-reverse;
}

.bkg-yellow {
  background-color: yellow;
}
.bkg-yellow span {
  flex: 1;
}

.bkg-purple {
  background-color: purple;
  width: 300px;
  height: 300px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

.bkg-red {
  background-color: red;
}
.bkg-red span {
  flex: 1;
}

.bkg-blue {
  background-color: blue;
  height: 5px;
}