JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row" id="container">
  <div class="column" id="col1">
    <div class="row" id="row11">
      <div class="item" id="item1">1</div>
      <div class="item" id="item2">2</div>
    </div>    
    <div class="item" id="item3">3</div>
  </div>
  <div class="column" id="col2">
    <div class="item" id="item4">4</div>
    <div class="item" id="item5">5</div>
  </div>
  <div class="column" id="col3">
    <div class="item" id="item6">6</div>
    <div class="item" id="item7">7</div>
  </div>
</div>

CSS

.row {
  display: flex;
  align-content: strech;
  align-items: align-items;
}

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

.item {
  margin: 1px;
  background-color: #ddd;
  flex-grow: 1;
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
}

#container {
  box-sizing: border-box;
  background-color: #fff;
  padding-top: 70px;
  height: 100vh;
}

#col1 {
  flex-grow: 3;
}

#row11 {
  flex-grow: 1;
}

#item3 {
  flex-grow: 2;
}

#col2 {
  flex-grow: 1;
}

#col3 {
  flex-grow: 2;
}

#item1 {
  flex-grow: 2;
}

#item2 {
  flex-grow: 1;
}

#item4 {
  flex-grow: 3;
}

#item5 {
  flex-grow: 1;
}

#item6 {
  flex-grow: 3;
}

#item7 {
  flex-grow: 2;
}