JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class="MyColumnClass">
        <img src="http://placehold.it/150x150" width="50%" />
        <p>In this example, each column has a different amount on text, which would ordinarily be difficult to vertically center. However, the javascript takes care of this.</p>
    </div>
    <div class="MyColumnClass">
        <img src="http://placehold.it/150x150" width="50%" />
        <p>When the page is loaded or resized, the verticalCenterColumns function makes all the columns the same height as the tallest column, then adjusts the positioning of the paragraph element to ensure that it is vertically centered! That means that even though this paragraph is longer than the previous paragraph, it will still be vertically centered. You could substitute any block or inline-block element for the p element and it would work.</p>
    </div>
    <div class="MyColumnClass">
        <img src="http://placehold.it/150x150" width="50%" />
        <p>It works for very short lines too!</p>
    </div>
</div>

CSS

.MyColumnClass {
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 30%;
    margin: 0 1% 0 1%;
    text-align: center;
    background-color: #6CA028;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #FFF;
    padding: 10px 0 10px 0;
    font-family: sans-serif;
}
.MyColumnClass p {
    display: inline-block;
    position: relative;
    margin: 0 0 0 0;
}

JavaScript

$(document).ready(function () {
    $(window).resize(verticalCenterColumns('.MyColumnClass', 'p')); //Fix the step height on browser resize 
});

$(window).load(function () {
    // this will fire after the entire page is loaded, including images 
    verticalCenterColumns('.MyColumnClass', 'p');
});

function verticalCenterColumns(column_identifier, text_identifier) {
    var columns = $(column_identifier);
    // Fix columns height 
    // Remove the top rules to allow columns to scale down 
    $(text_identifier, columns).css('top', '0');
    // Remove height rules to allow steps to scale down
    columns.css('min-height', '');
    var maxHeight = 0;
    columns.each(function () {
        var height = $(this).height();
        if (height > maxHeight) maxHeight = height;
    });
    columns.css('min-height', maxHeight); // Set all steps to be at least as tall as the tallest step 

    columns.each(function () {
        //alert(emptySpace(this));
        // determine how much empty space exists within the step div by comparing the outer bottom  
        // edge of the lowest child element with the inner bottom edge of the containing element 
        var lowestBottom = 0;
        $(this).children().each(function () {
            var bottom = outerBottomOffset($(this));
            if (bottom > lowestBottom) {
                lowestBottom = bottom;
            }
        });
        var containerBottom = innerBottomOffset($(this));
        var emptyHeight = containerBottom - lowestBottom;
        $('p', this).css('top', emptyHeight / 2);
    });
}

function outerBottomOffset(element) {
    return element.offset().top + element.outerHeight(true);
}

function innerBottomOffset(element) {
    return element.offset().top + element.outerHeight(true) - parseInt(element.css("padding-bottom")) - parseInt(element.css("margin-bottom"));
}