JSFiddle - React, Tailwind, and code Playground

by digthedoug

HTML

<div id="flexbox-holder"> 
    <div class="flex">
    </div> 
    <div class="flex flex-bigger"> 
    </div> 
</div>

<div id="flexbox-holder"> 
    <div class="flex"> 
        <h3>20,000 Leagues Under The Sea</h3> 
        <p>The year 1866 was marked by a bizarre development, an unexplained and downright inexplicable phenomenon that surely no one has forgotten.</p> 
    </div> 
    <div class="flex flex-bigger"> 
        <h3>Great Expectations</h3> 
        <p>My father's family name being Pirrip, and my Christian name Philip, my infant tongue could make of both names nothing longer or more explicit than Pip.</p> 
    </div> 
</div> 

<div id="flexbox-holder"> 
    <div class="flex"> 
    </div> 
    <div class="flex flex-bigger"> 
        <h3>Great Expectations</h3> 
        <p>My father's family name being Pirrip, and my Christian name Philip, my infant tongue could make of both names nothing longer or more explicit than Pip.</p> 
    </div> 
</div>

CSS

.container { padding-top: 40px; }
#flexbox-holder {
    margin: 10px;
    background-color: silver;
    display: -moz-box;
    display: -ms-box;
    display: -webkit-box;
    /*width: 600px*/
}
div.flex {
    background-color: white;
    border: 1px solid gray;
    margin: 10px;
    padding: 10px;
    width: 100px;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    -webkit-box-flex: 1;
}
div.flex-bigger {
    margin: 10px 0;
    -moz-box-flex: 2;
    -ms-box-flex: 2;
    -webkit-box-flex: 2;
}
h3 { line-height: 21px; }
h3, p { margin-bottom: 0; }
p { color: #333; }