JSFiddle - React, Tailwind, and code Playground
HTML
<div class="table">
<div class="row fixed"><img src="http://i.imgur.com/AKmmXE4.gif"/></div>
<div class="row fluid">Hello, I'm Mickey!</div>
</div>
<div class="table">
<div class="row fixed"><img src="http://i.imgur.com/f6948mH.gif"/></div>
<div class="row fluid">I'm Goofy!</div>
</div>
<div class="table">
<div class="row fixed"><img src="http://i.imgur.com/Dm2vlrA.gif"/></div>
<div class="row fluid">I'm Donald Duck!</div>
</div>
<div class="table">
<div class="row fixed"><img src="http://i.imgur.com/vRggi12.gif"/></div>
<div class="row fluid">Whoof!</div>
</div>
CSS
.table {
display:table;
min-height:50px;
}
.row {
display:table-cell;
}
.row.fluid {
width:100%;
}
.table {
position: relative;
}
.table:after {
background: none repeat scroll 0 0 #DADADA;
content: "";
height: 100%;
left: 34px;
position: absolute;
top: -24px;
width: 4px;
z-index: -1;
}
.table:first-child:after {
content: "";
display: none;
}
/* just styling */
.table { font-family: sans-serif; margin: 20px 0 }
.row { vertical-align: middle; padding:0 10px; }
.row.fluid { background: #f4f4f4; border-radius: 5px; }