JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>

<body>
    <div class="date-group">
        <div class='date-title'>
             13/02/2014
        </div>
        <div class="date-content">
            <div class="img-thumb float">
                <a href="../images/bold.jpg">
                    <img src="../images/bold.jpg">
                </a>
                <span class="caption">A big caption that might be going in more than one lines</span>                
            </div>
            <div class="img-thumb float">
                <a href="../images/bold.jpg"><img src="../images/bold.jpg"></a>
                <span class="caption">A caption2</span>                
            </div>
            <div class="img-thumb float">
                <a href="../images/bold.jpg"><img src="../images/bold.jpg"></a>
                <span class="caption">A caption3</span>                
            </div>
            <div class="img-thumb float">
                <a><img src="../images/bold.jpg"></a>
                <span class="caption">A caption4</span>                
            </div>
            <div class="img-thumb float">
                <a><img src="../images/bold.jpg"></a>
                <span class="caption">A caption5</span>                
            </div>
        </div>
    </div>
</body>

CSS

div.date-group {
    text-align: center;
    border: 1px solid black;
}

.date-group img{
    width:100px;
    height:100px;
}

.img-thumb{
    width:100px;
    text-align: center;
}
.date-group span{
    display: block;
}

.float{
    float: left;
}

.date-title{
    height:20px;
    background-color: "yellow";
    border-bottom:1px solid black;
    margin-bottom: 10px;

}
.date-content{
    margin-right: 10px;
}
.date-content:after {
    content: "";
    clear: both;
    display:block;
}