JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" class="tbl-center">
    <tr>
        <td style="width: 25%">
            <div class="outer-img-wrap">
                <div class="inner-img-wrap">
                    <img src="http://placehold.it/64x64" />
                </div>
            </div>
        </td>
        <td>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
    </tr>
    <tr>
        <td style="width: 25%">
            <div class="outer-img-wrap">
                <div class="inner-img-wrap">
                    <img src="http://placehold.it/400x300" />
                </div>
            </div>
        </td>
        <td>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
    </tr>
    <tr>
        <td style="width: 25%">
            <div class="outer-img-wrap">
                <div class="inner-img-wrap">
                    <img src="http://placehold.it/128x128" />
                </div>
            </div>
        </td>
        <td>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
    </tr>
</table>
<br>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text...

CSS

.outer-img-wrap {
    border: 2px solid gray;
    margin: 1vw auto;
    max-width: 192px;
    text-align: center;
    overflow: hidden;
}
.outer-img-wrap img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    vertical-align: middle;
}
.inner-img-wrap {
    background: #000;
    border: thin solid #ff9900;
    margin: 2px;
}
.tbl-center {
    width: 100%;
    table-layout: fixed;
}

JavaScript

$("document").ready( function()
{
    function resizeImageElements()
    {
        var imageElements = $(".outer-img-wrap .inner-img-wrap img");
        var imageElementsMaxHeight = -1;
        imageElements.map( function(index) {
            // compare the height of the img element
            if( $(this).height() > imageElementsMaxHeight ) {
                imageElementsMaxHeight = $(this).height();
            }
        } );

        imageElements.map( function(index) {
            var computeTopBottomPadding = ( imageElementsMaxHeight - $(this).height() ) / 2;
            $(this).css( {
                "padding-top": computeTopBottomPadding,
                "padding-bottom": computeTopBottomPadding,
            } );
        } );
    }

    resizeImageElements();

    // Bind the not-at-all throttled handler to the resize event
    $(window).resize( resizeImageElements );

} );