JSFiddle - React, Tailwind, and code Playground

by menocomp

HTML

<div class="grid grid-pad" style="background-color:red;border:1px red solid">
  <div class="col-2-3" style="background-color:blue;border:1px blue solid">
     Main Content
  </div>
  <div class="col-1-3" style="background-color:green;border:1px green solid">
     Sidebar
  </div>
</div>

CSS

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
[class*='col-'] {
  float: left;
}
.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}
[class*='col-'] {
  padding-right: 20px;
}
[class*='col-']:last-of-type {
  padding-right: 0;
}
.grid-pad {
  padding: 20px 0 20px 20px;
}
.grid-pad > [class*='col-']:last-of-type {
  padding-right: 20px;
}