JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="item3">
    <div class="container column c2">
      <div class="item1 c1"></div>
      <div class="item3"></div>
    </div>
  </div>
  <div class="item1 c1"></div>
  <div class="item2"></div>
</div>

CSS

html,
body {
  height: 97%;
  margin: 0;
  padding: 0;
}

div {
  border: 10px dotted teal;
}

.container {
  display: flex;
  border-color: tomato;
  height: 100%;
}

.row {
  flex-flow: row;
}

.column {
  flex-flow: column;
}

.item1 {
  flex: 1;
}

.item2 {
  flex: 2;
}

.item3 {
    height: 100%;
  flex: 3;
}

.c1 {
  border-color: gold;
}

.c2 {
  border-color: darkblue;
}