JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one"></div>
<div class="two"></div>
<div class="three">
  <h1>Hello</h1>
</div>
<div class="four">
  <h1>Hello</h1>
</div>

CSS

*{
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
  width: 100%;
}
.one {
  width: 100%;
  height: 50px;
  background-color: #c4c9d4;
}
.two{
  width: 100%;
  height: 80px;
  background-color: #a7aebe;
}
.three{
  width: 20%;
  height: 100%;
  overflow: hidden;
  float: left;
  background-color: #8a93a8;
}
.four{
  width: 80%;
  float: left;
  background-color: #576075;
}