JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="hidden"><h1>Choose an image.</h1></div>
    <div id="instructions"><h1>Choose an image.</h1></div>
    <div id="cols">
        <div id="leftContainer" class="halfContainer"><img id="leftImage" src="http://www.washingtonpost.com/news/morning-mix/wp-content/uploads/sites/21/2014/09/Grumpy_Cat_Endorsement-017d7-ULFU.jpg" class="image" /></div><div id="rightContainer" class="halfContainer"><img id="rightImage" src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" class="image" /></div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100vh;
}

#wrapper {
    height: 100vh;
    display: table;
}

#instructions, .hidden {
    display: table-row;
}

.hidden {
    visibility: hidden;
}

#instructions {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

#cols {
    display: table-row;
}

.halfContainer {
    display: table-cell;
    width: 50vw;
    height: 100%;
    padding: 2.5vh 2.5vw;
    vertical-align: middle;
}

#leftContainer {
    text-align: right;
}

.image {
    min-height: 0;
    min-width: 0;
    max-width: 40vw;
    margin: auto;
}

JavaScript

window.onload = function() {
    var mH = document.getElementsByClassName('image');
    for(var i = 0; i < mH.length; i++) {
        mH[i].style['maxHeight'] = 'calc(94vh - ' + parseInt(window.getComputedStyle(document.getElementById('instructions'), null).getPropertyValue('height')) + 'px)';
    }
}