JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="sidebar">
  </div>

  <div class="content">
    text
    <div class="over">
      <div></div>
    </div>
  </div>

  <div class="nav">
  </div>
</div>

CSS

*
{
  margin: 0;
  padding: 0;
}

html,
body
{
  height: 100%;
}

.container
 {
   display: flex;
   flex-wrap: wrap;
   min-height: 100%;
 }
 
 .sidebar
 {
   background: #06c;
   flex-grow: 1;
   width: 150px;
 }
 
 .content
 {
   background: #09c;
   flex-grow: 1;
 }
 
 .nav
 {
   background: #09f;
   flex-grow: 1;
   width: 100px;
 }