JSFiddle - React, Tailwind, and code Playground
by Christopher Yongchu
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-1 f">ax</div>
<div class="col-sm-10 blue">b</div>
<div class="col-sm-1 f">ay</div>
</div>
<div class="row flex">
<div class="col-sm-1 blue">am</div>
<div class="col-sm-10">
<img class="img-responsive" src="http://dummyimage.com/3200x3200.png">
</div>
<div class="col-sm-1 blue">an</div>
</div>
<div class="row">
<div class="col-sm-1 f">ah</div>
<div class="col-sm-10 blue">b</div>
<div class="col-sm-1 f">ai</div>
</div>
</div>
CSS
div {
border: 1px solid;
}
.flex {
display: flex;
}
.blue {
background: #4679bd;
}
.f {
background: yellow;
}