JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
     <div id="navigation">navigation</div>
     <div id="content"></p>content</p></p>content</p></p>content</p></p>content</p></p>content</p>
     </p>content</p></div>
  </div>
  <div id="footer">footer</div>

CSS

html, body {width: 100vw, height: 100vh}
#container {
  display:flex; 
  align-items: center;
  flex-direction:row;}
#main, #footer {
  width: 100vw;
  }
#main{
  display: flex;
  flex-direction: row;
}
#content {
  background-color:red;
  width: 80vw;
}
#navigation {
  background-color:white;
  width: 20vw;
}
#footer {
  background-color:green;
}