JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://oneillwebs.com/www/css/reset.css">
<link rel="stylesheet" href="http://oneillwebs.com/www/css/grid.css">
<link rel="stylesheet" href="http://oneillwebs.com/www/css/settings.css">
<div class="small">small</div>
<div class="xlarge">xlarge</div>
<div class="medium">medium</div>
<div class="xlarge">xlarge</div>
<div class="large">large</div>
<div class="xlarge">xlarge</div>

CSS

div { background: lime; float: left; width: 48%; margin: 1% 1%; display: inline-block; overflow: hidden; }

.small { height: 100px; }
.medium { height: 150px; }
.large { height: 200px; }
.xlarge { height: 300px; }

div:nth-child(2) { float:right; }