JSFiddle - React, Tailwind, and code Playground

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="mycontainer">
    <div class="table-cell">
    <div class="col-xs-7 col-sm-8 col-md-9">
        <h3>Welcome</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        </p>
        <p>
            <a href="#"><span class="badge">Learn More</span></a>
        </p>
    </div>
    <div class="col-xs-5 col-sm-4 col-md-3">
        <img class="circle-img" src="http://placehold.it/100x100"/>
    </div>
    </div>
</div>

CSS

.badge {
    background: none;
    border: 1px solid #12A5F4;
    border-radius: 15px;
    color: #12A5F4;
    font-weight: 100;
    font-size: 14px;
    padding: 5px 18px;
    margin-top: 12px;
}

.mycontainer {
    max-width: 50%;
    display: table;
    min-height: 200px;
    margin: 0 auto;
    border: 1px solid black;
}

.table-cell {
    display: table-cell;
    vertical-align: middle;
}

.circle-img {
    border-radius: 50%;
    height: 100%;
    padding: 10px;
}