JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main" class="clear-fix">
  <div class="panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia delectus illum cumque, dignissimos. Blanditiis distinctio non pariatur, numquam, laborum tempore. Necessitatibus sapiente, recusandae voluptas tenetur totam! Sunt dolor ducimus alias!</div>
  <div class="nav">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident aspernatur dolorem ut accusantium. Corrupti, molestiae excepturi quaerat, corporis atque maiores! Animi tempore cum accusantium non maxime odit quia, aspernatur molestiae.</div>
</div>

CSS

*{
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body{
  height: 100%;
  min-height: 100%;
}

.clear-fix:before, .clear-fix:after{
    display: block;
    content: '';
    clear: both;
}

#main{
  height: 100%;
}

.panel, .nav{
  float: left;
  padding: 15px;
  height: 100%;
  min-height: 100%;
  overflow: auto;
}

.panel{
  background: pink;
  width: 225px;
}

.nav{
  background: red;
  width: calc(100% - 225px);
}