JSFiddle - React, Tailwind, and code Playground

by cannap

HTML

<div class="wrapper cf">

  <nav class="navigation">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident quam quod quos, saepe modi iusto, magni quasi architecto maiores atque? Molestiae doloremque aspernatur cum atque rerum. Cupiditate consequatur iure dicta.
  </nav>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi provident perspiciatis, eligendi facilis fuga, libero, error fugiat tempore nisi modi odio animi. Explicabo error doloribus molestias accusantium, cumque iusto dignissimos.
  </div>
</div>

CSS

body, html {
  height:100%;
}
.wrapper {
  display:table;
}
.navigation {
  width: 20%;
  float: left;
clear:left;
  background:red;
}

.content {
  float:left;
display:table-cell;
  width:80%;
    background:green;

}

.wrapper {
  background:yellow;
}


.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}