JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<div class="article cf">
    <img src="http://goo.gl/IWBIa" alt="" />
    
    <div>
        <h2>Headline</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    </div>
</div>

CSS

/* -- normalize -- */
* { margin: 0 ; padding: 0 ; border: 0 none ; }
html, body { font-family: arial, sans-serif ; font-size: 90% ; }

/* -- clearfix -- */
.cf:before, .cf:after { content: " " ; display: table ; }
.cf:after { clear: both ; }
/* .cf { zoom: 1 ; } -- IE6/7 */

/* -- layout -- */
.article {
    display: table ;
    padding: 1em ;
    background-color: #eee ;
}

.article img {
    float: left ;
    width: 150px ; /* remove! */
}

.article div {
    display: table-cell ;
    vertical-align: middle ;
    padding: 0 1em ;
    /* zoom: 1 ; -- IE6/7 -- */
}

.article h2 {
    text-transform: uppercase ;
}