JSFiddle - React, Tailwind, and code Playground

by pramendra

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.4.1/build/cssfonts/cssfonts-min.css&amp;3.4.1/build/cssgrids/cssgrids-min.css&amp;3.4.1/build/cssreset/cssreset-min.css&amp;3.4.1/build/cssbase/cssbase-min.css">
<ul class="unit">
    <li class="row yui3-g">
        <div class="yui3-u item profile">one</div>
        <div class="yui3-u item info">
            <div class="detail">
                <h3>Name</h3>
                <h4>date</h4>
                <h4>edit</h4>
                <div>comment</div>
            </div>
        </div>
    </li>
</ul>

<ul>
    <li class="yui3-u-1" style="background:#ff0;">
        <div class="pro">
            profile pic
        </div>
        <div class="det">
            profile pic
        </div>
        
    </li>
</ul>

CSS

.unit{
     width: 100%
}
.row{
    list-style:none;
}

.item {
    display: table-cell;
}

.profile{ 
    background:#ccc;
    min-width:100px;
}

.info{ 
    background:#f00;
    width:100%;
}

.pro{
    float:left;
    width:100px;
    height:100px;
    background:#0ff;
    margin-rop:10px;
}