JSFiddle - React, Tailwind, and code Playground

by gregbabula

HTML

<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<section>
    <article>&nbsp;</article>
    <article>&nbsp;</article>
    <article>&nbsp;</article>
    <article>&nbsp;</article>
    <article>&nbsp;</article>
</section>

<section>
    <div class="col in-block">    
        <article>&nbsp;</article>
    </div>                    
    
    <div class="col in-block">    
        <article>&nbsp;</article>
        <article>&nbsp;</article>
        <article class="orphan">
            <p>Lorom ipsoum dolor shan lerom nisom</p>
        </article>
    </div>
</section>

CSS

* { vertical-align: text-top; }

/**/
.in-block { display: inline-block; *display: inline; zoom: 1; }

/**/
section { margin: 20px 0; text-align: center; }

section article { background: #000; display: inline-block; *display: inline; padding: 0; margin: 0 0 0 -4px; height: 100px; width: 100px; zoom: 1; }
section article:nth-child(even) { background: #ff0000; }

.orphan { padding: 50px 0; width: 200px; }
.orphan p { padding: 0 10px; }

.col { display: inline-block; width: 250px; }
.col article { width: 100%; }