JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div-table">
    <div class="div-table-row">
        <div class="div-table-col-first">
            <img width="50" height="50" id="image-middle">First Image Text in the first column and sentence</div>
        <div class="div-table-col-first">Second Column Headline
            <br />
            <img alt="Checkbox" width="30" height="30" id="image-middle">First Image Second Column Text
            <br />
            <br />
            <img id="image-middle" alt="Padlock in a circle">Second Image Second Column Text</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-col-first">
            <img width="50" height="78" id="image-middle">Second Image Text in the first column and sentence</div>
        <div class="div-table-col-first">
            <img id="image-middle" alt="Pie Chart">Third Image Second Column Text
            <br />
            <br />
            <img id="image-middle" alt="A Cover for a Safe">Fourth Image First column Text</div>
    </div>
</div>

CSS

.div-table {
    display:table;
    width:776px;
    height: auto;
    background-color:#eee;
    border:1px solid #666666;
    border-spacing:5px;
    /*cellspacing:poor IE support for  this*/
    clear: both;
}
#image-middle {
    vertical-align: middle;
    float: left;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
}
.div-table-row {
    display:table-row;
    width: 776px;
    float: left;
    clear: both;
}
.div-table-col-first {
    display:table-column;
    width:49%;
    float: left;
}