JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
  <div class="box-4"></div>
  <div class="box-5"></div>
</div>

CSS

.container{
  display: grid;
  grid-template-columns: 20% 40% 40%;
  grid-gap: 20px;
}

.container > div{
  border: 1px solid red;
}

.box-1{
  background-color: lightgreen;
  height: 300px;
}

.box-2{
  background-color: lightsalmon;
  height: 150px;
}

.box-3{
  background-color: lightsalmon;
  height: 150px;
}

.box-4{
  background-color: lightskyblue;
  height: 500px;
  
}

.box-5{
  background-color: lightseagreen;
  grid-column: 2/-1;
}