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;
}

JavaScript

window.onload = function() {
    window.left = document.getElementById("leftImage"),
   window.right = document.getElementById("rightImage"),
    window.head = document.getElementById("instructions"),
   window.leftW = parseInt(window.getComputedStyle(left, null).getPropertyValue('width')),
  window.rightW = parseInt(window.getComputedStyle(right, null).getPropertyValue('width')),
   window.leftH = parseInt(window.getComputedStyle(left, null).getPropertyValue('height')),
  window.rightH = parseInt(window.getComputedStyle(right, null).getPropertyValue('height'));

console.log(leftW);
    resize(leftW, rightW, leftH, rightH);
}

window.onresize = function() {
    resize(leftW, rightW, leftH, rightH);
}

function resize(leftW, rightW, leftH, rightH) {
    var winW = window.innerWidth,
      hcPadW = (winW * .025 * 2),
        winH = window.innerHeight,
      hcPadH = (winH * .025 * 2),
        colW = (winW / 2),
        colH = (winH - parseInt(window.getComputedStyle(head, null).getPropertyValue('height'))),
        colR = ((colW - hcPadW) / (colH - hcPadH)),
       leftR = (leftW / leftH),
      rightR = (rightW / rightH);
    
    if(colR < leftR) {
        left.style.width = (colW - hcPadW) + 'px';
        left.style.height = (((colW - hcPadW) * leftH) / leftW) + 'px';
    } else {
        left.style.height = (colH - hcPadH) + 'px';
        left.style.width = (((colH - hcPadH) * leftW) / leftH) + 'px';
    }
    
    if(colR < rightR) {
        right.style.width = (colW - hcPadW) + 'px';
        right.style.height = (((colW - hcPadW) * rightH) / rightW) + 'px';
    } else {
        right.style.height = (colH - hcPadH) + 'px';
        right.style.width = (((colH - hcPadH) * rightW) / rightH) + 'px';
    }
    
    console.log('Window: ' + winW + 'x' + winH);
    console.log('Left: ' + leftW + 'x' + leftH + ' Ratio: ' + leftR);
    console.log('Right: ' + rightW + 'x' + rightH + ' Ratio: ' + rightR);
    console.log('Left Rendered: ' + parseInt(left.style.width) +...