JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <aside class="left_nav">left</aside>
  <section class="main_content">right</section>
</div>

CSS

.wrap{
  display:table;
  table-layout:fixed;
  width:100%;
}
.main_content{
  background:#f0f;
  display:table-header-group;
}
.left_nav{
  dipslay:table-cell;
  background:#f60;
}
@media (min-width:300px){
  .wrap, .left_nav, .main_content{
    display:block;
  }
  .left_nav{
    float:left;
    width:30%;
  }
  .main_content{
    padding-left:30%;
  }
}