JSFiddle - React, Tailwind, and code Playground

by iurevych

HTML

<div class="row">
    <div class="col1of3">
      <div class="test-module">
          Navigation<br/>Navigation<br/>Navigation<br/>Navigation<br/>
      </div>
    </div>
    <div class="col2of3">
      <div class="test-module">
          Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>
      </div>
    </div>
</div>

CSS

body {
  padding: 10px;
}

/* The clearfix hack is a popular way to contain floats without resorting 
 * to using presentational markup.
 * Credits: http://nicolasgallagher.com/micro-clearfix-hack */
.row {
  *zoom: 1;
}
 
.row:before,
.row:after {
  display: table;
  content: "";
  line-height: 0;
}
 
.row:after {
  clear: both;
}
 
/* Reserved classes for columns */
.col1of3, .col2of3 {
  float: left;
}
 
.col1of3 {
  width: 33.33333%;
}
 
.col2of3 {
  width: 66.66666%;
}

/* Test data */
.test-module {
  background-color: #ddd;
  margin: 10px;
  padding: 10px;
}