JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left">

</div>
<div id="right">
    <div id="top"></div>
    <div id="center"></div>
    <div id="bottom">
        <div id="bottom-left"></div>
        <div id="bottom-right"></div>
    </div>
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
}

* {
  margin: 0px;
  padding: 0px;
}

#left {
  float: left;
  height: 100%;
  width: 20%;
  background-color: Blue;
}

#right {
  float: left;
  height: 100%;
  width: 80%;
  background-color: Green;
}

#top {
  width: 100%;
  height: 33.33%;
  background-color: lightblue;
}

#center {
  width: 100%;
  height: 33.33%;
  background-color: lightgreen;
}

#bottom {
  width: 100%;
  height: 33.34%;
  background-color: black;
}

#bottom-left {
  float: left;
  height: 100%;
  width: 35%;
  background-color: Yellow;
}

#bottom-right {
  float: left;
  height: 100%;
  width: 65%;
  background-color: orange;
}