JSFiddle - React, Tailwind, and code Playground

HTML

<!-- row 1 -->
<div class="tn-container tn-left">
    <div class="tn-span">
        <img src="http://placekitten.com/150" alt="" />
        Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text Row 1 text 
    </div>
</div>
<!-- row 2 -->
<div class="tn-container tn-right">
    <div class="tn-span">
        <img src="http://placekitten.com/150" alt="" />Row 2 text</div>
</div>
<!-- row 3 -->
<div class="tn-container tn-left">
    <div class="tn-span">
        <img src="http://placekitten.com/150" alt="" />Row 3 text</div>
</div>
<!-- row 4 -->
<div class="tn-container tn-right">
    <div class="tn-span">
        <img src="http://placekitten.com/150" alt="" />Row 4 text</div>
</div>

CSS

.tn-container {
    height: 100%;
    background: #fff;
}
.tn-span {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    border-bottom:1px solid #ccc;
    width: 100%;
}
.tn-left img {
    float:left;
    width:110px;
    height:90px;
    margin:5px;
    text-align:right;
}
.tn-right img {
    float:right;
    width:110px;
    height:90px;
    margin:5px;
    text-align:left;
}