JSFiddle - React, Tailwind, and code Playground

by SchmalzyB

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container rider">

    <div class="row">

        <div> 
            <div class="col-sm-4 col-xs-12 left">
                <img src="http://placehold.it/350x150" />
                <p>Lorem ipsum dolor sit amet, adipiscing elit.</p>
                <button class="btn btn-default btn-small">go</button>
            </div>
        </div>


        <div>
            <div class="col-sm-4 col-xs-12 center">
                <img src="http://placehold.it/350x150" />
                <p>Lorem ipsum dolor sit amet, adipiscing elit.</p>
                <button class="btn btn-default btn-small">go</button>
            </div>
        </div>


        <div>
            <div class="col-sm-4 col-xs-12 right">
                <img src="http://placehold.it/350x150" />
                <p>Lorem ipsum dolor sit amet, adipiscing elit.</p>
                <button class="btn btn-default btn-small">go</button>
            </div>
        </div>

    </div>

</div>

CSS

.rider > .row , .rider > .row > div, .rider > .row > div > div {
    vertical-align:middle;
    }

.rider img, .rider p, .rider button {
    display:inline-block;
}
.rider img {
    float:left;
}
.rider p {
    width: 140px;
    margin: 0;
    padding: 0;
    }

.rider button {
    float:right;
}