JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
    <div class="row fixed">
        <div style="position:relative;">
            <img src="http://i.imgur.com/AKmmXE4.gif" />
        </div>
    </div>
    <div class="row fluid">Hello, I'm Mickey!</div>
</div>
<div class="table">
    <div class="row fixed">
        <div style="position:relative;">
            <img src="http://i.imgur.com/f6948mH.gif" />
        </div>
    </div>
    <div class="row fluid">I'm Goofy!</div>
</div>
<div class="table">
    <div class="row fixed">
        <div style="position:relative;">
            <img src="http://i.imgur.com/Dm2vlrA.gif" />
        </div>
    </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;
    height:50px;
}
.row {
    display:table-cell;
    position:relative;
}
.row.fluid {
    width:100%;
}
.table:not(:last-child) .row.fixed > div:after {
    content:'';
    width: 6px;
    height: 30px;
    background: #D3D3D3;
    position: absolute;
    left: 50%;
    margin: -4px 0 0 -3px;
    top: 100%;
}
/* just styling */
 .table {
    font-family: sans-serif;
    margin: 20px 0
}
.row {
    vertical-align: middle;
    padding:0 10px;
}
.row.fluid {
    background: #f4f4f4;
    border-radius: 5px;
}