JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
<!-- this is responsive, ok? -->
<div class="pure-g-r">
    <div class="pure-u-1-3 a">
        <div class="inside">
            div.a with just one line
        </div>
    </div>
    <div class="pure-u-1-3 b">
        <div class="inside">
            div.b with more than a line.<br>
            How about two lines?<br>
            Or maybe three? 
        </div>
    </div>
    <div class="pure-u-1-3 c">
        <div class="inside">
            div.c just have one line
        </div>
    </div>
</div>
        








<!-- ignore this -->    
<div class="pure-hidden-phone">tablet/desktop version</div>
<div class="pure-hidden-tablet">mobile version - please resize this preview window</div>

CSS

.pure-g-r { display:table; width:100%; }

.a,
.b,
.c {
    vertical-align: middle;
    display:table-cell;
    height:100%;
}

.inside {
    padding: 1em 0.5em;
    text-align: center;
}






/* ignore this */
.a { background: #ffd9d9 }
.b { background: #eeffe8 }
.c { background: #e8e9ff }
.pure-hidden-tablet,
.pure-hidden-phone { text-align:center; margin-top: 20px; }
.pure-hidden-tablet { font-weight: bold; color: red; font-size: 1.4em;  }
.pure-hidden-phone { color: #ccc; }