JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="wrapper">
  <div class="col-left">
    <div class="col-left-row-1 color green">
      Lorem 1
    </div>
    <div class="col-left-row-2 color yellow">
      Lorem 2,3,4
    </div>
    <div class="col-left-row-3 color  red">
      Lorem 5
    </div>
  </div>
  <div class="col-right color blue">
    Lorem 6
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  height: 500px;
  color: darkblue;
}
.col-right {
  flex-basis: 30%;
}
.col-left {
  flex-basis: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.red {
  background-color: red;
  flex-grow: 1;
}
.green {
  background-color: green;
  flex-grow: 3;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
  flex-grow: 2;
}
.color {
  padding: 30px;
  margin: 2px;
}