JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">

  <div id="sidebar">
    <ul>
      <li>abc</li>
      <li>def</li>
    </ul>
  </div>

  <div id="content">
    defsdfasdfasd fjasd;lf jasdl;fkjasd; lfjas; lfkjadsfl;sdajfs dlfjsdlfksjflaskfjsdaljfasdl asdfsad sfljsf sadfjsldfj sakfj;alsdfj dfsjsadfl;j asdlfjl;asdfj defsdfasdfasd fjasd;lf jasdl;fkjasd; lfjas; lfkjadsfl;sdajfs dlfjsdlfksjflaskfjsdaljfasdl asdfsad
    sfljsf sadfjsldfj sakfj;alsdfj dfsjsadfl;j asdlfjl;asdfj
  </div>

  <div id="main-footer">
  </div>

</div>

CSS

#main {
  border: solid green 2px;
  display: flex;
}

#sidebar {
  background-color: red;
  width: 20%;
  float: left;
}

#content {
  background-color: orange;
  width: 80%;
  float: left;
}

#main-footer {
  clear: both;
}