JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul class="Container">
        <li>
            <span class="Item">
                <a href="#"><img src="http://jsfiddle.net/img/logo.png"/></a>
                <span class="Info">
                    <a href="#">Title One</a>
                    <span class="Details">One Point One</span>
                </span>
            </span>
        </li>
        <li>
            <span class="Item">
                <a href="#"><img src="http://jsfiddle.net/img/logo.png"/></a>
                <span class="Info">
                    <a href="#">Title Two</a>
                    <span class="Details">Two Point One</span>
                </span>
            </span>
        </li>
    </ul>
</div>

CSS

.Container {
    list-style-type:none;
}
.Container li {
    background-color:grey;
    display:inline;
    text-align:center;
}
.Container li .Item {
    border:solid 2px #ccc;
    display:inline-block;
    min-height:50px;
    vertical-align:top;
    width:170px;
}
.Container li .Item .Info {
    display:inline-block;
}
.Container li .Item .Info a {
    display:inline-block;
    width:160px;
}
.Container li .Item .Info .Details {

}