JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="photo-list clear">
        <li class="photo-thumb">
            <div class="parent-container">
            <div class="thumb-container">
                <a href="#">
                    <img class="horizontal" alt="somewhere far beyond" src="http://lorempixel.com/300/200/sports/"/>
                    <span> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
                </a>
            </div>
            </div>
        </li>
        <li class="photo-thumb">
            <div class="parent-container">
            <div class="thumb-container">
                <a href="#">
                    <img class="vertical" alt="missing summer" src="http://lorempixel.com/200/300/sports/"/>
                    <span> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
                </a>
            </div>
            </div>
        </li>
        <li class="photo-thumb">
            <div class="parent-container">
            <div class="thumb-container">
                <a href="#">
                    <img class="horizontal" alt="into the wild" src="http://lorempixel.com/300/200/sports/"/>
                    <span>caption 2</span>
                </a>
            </div>
            </div>
        </li>
        <li class="photo-thumb">
            <div class="parent-container">
            <div class="thumb-container">
                <a href="#">
                    <img class="vertical" alt="light trails" src="http://lorempixel.com/200/300/sports/"/>
                    <span>caption 4</span></a>
            </div>
            </div>
        </li>
        <li class="photo-thumb">
            <div class="parent-container">
            <div class="thumb-container">
                <a href="#">
                    <img class="horizontal" alt="living tree" src="http://lorempixel.com/300/200/sports/"/>
                    <span>caption...

CSS

.photo-list {
    	padding: 45px 0 0 0;
        width: 100%;
    }

    .photo-thumb {
        position: relative;
        display: inline-block;
        margin: 2% 2% 2% 2%;
        width: 16%;
        height: auto;
        vertical-align: top;
        text-align: center;
        }
    .parent-container {
        width: 100%;
        padding-bottom: 100%;
        display: block;
        position: relative;
    }
    .thumb-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
.thumb-container span {
    display: block;
    padding: 10px 0 0 0;
    width: 100%;
}
    .photo-thumb img {
        position: relative;
    }
    .photo-thumb img.vertical {
        height: 100%;
        width: auto;
    }
    .photo-thumb img.horizontal {
        width: 100%;
        height: auto;
    }

    @media only screen and (max-width : 1440px),
    only screen and (max-device-width : 1440px){
        .photo-thumb {
        width: 21%;
        }
    }

    @media only screen and (max-width : 1080px),
    only screen and (max-device-width : 1080px){
        .photo-thumb {
        width: 29.3333%;
        }
    }

    @media only screen and (max-width : 530px),
    only screen and (max-device-width : 530px){
        .photo-thumb {
        width: 46%;
        }
    }

    @media only screen and (max-width : 320px),
    only screen and (max-device-width : 320px){
        .photo-thumb {
        width: 96%;
        }
    }

JavaScript

jQuery( function($) {

function adjustHeight(){
    $('.photo-thumb').each(function(item, index){
        $(this).css('height', '');
        var height = $(this).height();
        var anchorHeight = $(this).find('.thumb-container span').height();
        var imageHeight = $(this).find('.thumb-container img').height();
        var h = anchorHeight + imageHeight;
        $(this).css('height', h + 'px');
    });
}

    $(document).ready(function(){
        adjustHeight();
     });

    $(window).load(function(){
        adjustHeight();
    });

    $(window).resize(function() {
        adjustHeight();
    });
});