JSFiddle - React, Tailwind, and code Playground

by Bretto

HTML

<div id="container"> 
    <hr>
    
    <div class="imgblock cf"> 
        <div class="img img-medium"> 
            <img src="http://placekitten.com/50/50" alt=""> 
        </div> 
        <div class="content"> 
            A little bit of content
        </div> 
    </div> 
    
    <hr> 
    
    <div class="imgblock cf"> 
        <div class="img img-medium"> 
            <img src="http://placekitten.com/100/100" alt=""> 
        </div> 
        <div class="content"> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis adipiscing est. Curabitur vel dui dolor. Vestibulum molestie fermentum diam, nec interdum ante molestie ut. Integer consequat iaculis auctor. Duis vitae felis ligula, ultrices blandit dolor.
        </div> 
    </div> 
    
    <hr> 
    
    <div class="imgblock cf"> 
        <div class="img img-medium"> 
            <img src="http://placekitten.com/50/50" alt=""> 
        </div> 
        <div class="content"> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis adipiscing est. Curabitur vel dui dolor. Vestibulum molestie fermentum diam, nec interdum ante molestie ut. Integer consequat iaculis auctor. Duis vitae felis ligula, ultrices blandit dolor.
            <div> 
                <img src="http://placekitten.com/32/32" alt=""> 
                <img src="http://placekitten.com/32/32" alt=""> 
                <img src="http://placekitten.com/32/32" alt=""> 
            </div> 
            <div class="imgblock cf"> 
                <i class="img icon icon-a"></i> 
                <div class="content"> 
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </div> 
            </div> 
        </div> 
    </div>  
    
    <hr> 
    
    <div class="imgblock cf"> 
        <div class="img icon icon-a"></div> 
        <div class="content"> 
            <strong><a href="#">necolas opened pull request 234</a> on <a href="#">paulirish/project</a> 20 minutes...

CSS

body {
    margin:0;
    font:12px/1.4 sans-serif;
    color:#222;
    background:#fff;
}

#container {
    width:500px;
    margin:0 auto;            
}

/* ----- REUSABLE IMG BLOCK ----- */

.imgblock {

}

.imgblock .img {
    float:left;
    margin:0 5px 0 0;
}

.imgblock .img-medium {
    margin-right:10px;
}

.imgblock .img img {
    display:block;
}

/*
 * 1. Create new block formatting context in modern browsers
 * 2. Avoid shrink-wrap behaviour of table-cell
 * 3. Override for IE6/7
 * 4. Create new block formatting context in IE6/7
 * Alternatively, use `overflow:hidden` if clipping is OK
 * www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
 * facebook.com
*/

.imgblock .content {
    display:table-cell; /* 1 */
    width:10000px; /* 2 */
    *width:auto; /* 3 */
    *zoom:1; /* 4 */
}

/* ----- REUSABLE ICONS ----- */

.icon {
    display:inline-block;
    width:16px;
    height:16px;
    margin:0 5px 0 0;
    background:url(http://placekitten.com/16/16);
}

.icon-a {
    background-position:0 0;
}

/* ----- CLEARFIX ----- */

.cf {
    *zoom:1;
}

.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}