JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div class="full">
<div class="one">item #1</div>
<div class="two">item #2</div>
</div>

<div class="full">
<div class="four">item #4</div>
<div class="three">item #3</div>
</div>

<div class="full">
<div class="one">item #1</div>
<div class="two">item #2</div>
</div>

<div class="full">
<div class="four">item #4</div>
<div class="three">item #3</div>
</div>

CSS

div.full, div.one, div.two, div.three, div.four { box-sizing:border-box; }

div.full > div.one, div.two, div.three {
border: 1px solid #eee;
margin-bottom: 0;
float:left;
height:4em;
}

div.four {  
background:#EEF;
border: 1px solid #eee;
margin-bottom: 0;
float: right;
height:4em;
}


div.one, div.four { width:65%; }
div.two, div.three { width:35%; }

@media screen and (max-width:800px) {
div.full > div.one, div.two, div.three, div.four { width: 100%; text-align: center; }
}