JSFiddle - React, Tailwind, and code Playground

HTML

<div id="site">
  <aside>
    <div class="block1">
      
    </div>
    <div class="block2">
      
    </div>
    <ul>
      <li><a href="#">link1</a></li>
      <li><a href="#">link2</a></li>
      <li><a href="#">link3</a></li>
      <li><a href="#">link4</a></li>
      <li><a href="#">link5</a></li>
      <li><a href="#">link6</a></li>
      <li><a href="#">link7</a></li>
      <li><a href="#">link8</a></li>
      <li><a href="#">link9</a></li>
      <li><a href="#">link10</a></li>
      <li><a href="#">link11</a></li>
      <li><a href="#">link12</a></li>
      <li><a href="#">link13</a></li>
      <li><a href="#">link14</a></li>
      <li><a href="#">link15</a></li>
      <li><a href="#">link16</a></li>
      <li><a href="#">link17</a></li>
      <li><a href="#">link18</a></li>
    </ul>
  </aside>
  <div class="main">
    <div class="content">
      <div class="content-inner">
        
      </div>
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
body, html {
  height: 100%;
}
#site {
  background: #ccc;
}
#site:after{
    content:'';
	display:block;
	clear:both;
}
aside {
  float: left;
  width: 292px;
  background: #fff;
  border-right: 1px solid #f2f2f2;
}
.block1 {
  width: 292px; 
  height: 200px; 
  background: red;
}
.block2 {
  width: 292px; 
  height: 200px;
  background: navy;
 }
.main {
  height: 100%;
}
.content {
  min-height: 100%;
}
.content-inner {
  min-height: 100%;
}