JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="my-row">
<div class="nopadding">
<img class="img-responsive" src="http://www.dismantledesign.com/testsite2/img/clients/ivey.jpg">
</div>
<div class="nopadding cinfo">
<div class="clientinfo text-center">
<h3>IVEY</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<a href="#"><span class="icon-sprite sprite-ig"> </span></a>
<a href="#"><span class="icon-sprite sprite-fb"> </span></a>
<a href="#"><span class="icon-sprite sprite-gp"> </span></a>
<a href="#"><span class="icon-sprite sprite-sc"> </span></a>
<a href="https://twitter.com/contracoda" target="_blank"><span class="icon-sprite sprite-tw"> </span>span</a>
</div>
</div>
</div>
<div class="nopadding cinfo">
<img class="img-responsive" src="http://www.dismantledesign.com/testsite2/img/clients/rufus.jpg">
</div>
<div class="nopadding">
<div class="clientinfo text-center">
<h3>RUFUS DAWKINS</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<a href="#"><span class="icon-sprite sprite-ig"> </span></a>
<a href="#"><span class="icon-sprite sprite-fb"> </span></a>
<a href="#"><span class="icon-sprite sprite-gp"> </span></a>
<a href="#"><span class="icon-sprite sprite-sc"> </span></a>
<a href="https://twitter.com/contracoda" target="_blank"><span class="icon-sprite sprite-tw"> </span></a>
</div>
</div>
</div>
</div>
SCSS
@media screen and (min-width: 992px) {
.my-row {
display: flex;
align-items: stretch;
}
.my-row > div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
}
/*/////////////////////////*/
.clientsdetail {
text-align: center;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.clientinfo h3 {
padding-top: 10px;
;
}
.clientinfo p {
padding: 0px 30px;
font-size: 15px;
}