JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="row-fluid" id="theContainer">
  <div class="col-sm-6 resizeMe">
    <img class="filler" src="http://dummyimage.com/3000/ff0002/ffffff" />
    <img class="filler" src="http://dummyimage.com/3000/20ff00/ffffff" />
  </div>
  <div class="col-sm-6">
    <img class="main-img" src="http://dummyimage.com/3000/2000ff/ffffff" />
  </div>
</div>
<div class="row-fluid">
<div class="col-xs-12">
<h2 class="theWidthBeforeDomReady"></h2>
	<h2 class="theWidth"></h2>
		<table>
      <tr>
        <th></th>
        <th>sm6</th>
        <th>imgH</th>
      </tr>
      <tr id="theBody">
        <td>initial</td>
			  <td class="sm6"></td>
			  <td class="imgH"></td>
      </tr>
      <tr id="DOMready">
        <td>DOMready</td>
			  <td class="sm6"></td>
			  <td class="imgH"></td>
      </tr>
      <tr id="onLoad">
        <td>onLoad</td>
			  <td class="sm6"></td>
			  <td class="imgH"></td>
      </tr>
		</table>
</div>
</div>

CSS

.main-img {
  width: 100%;
  height: auto;
}
#theContainer {
  margin-top: 15px;
}

/*body {width: 100vw;}*/
table td {
  padding: 5px;
}

JavaScript

document.initPictures = function() {
  $('.resizeMe').css({
    'height': $('#theContainer .col-sm-6').eq(1).height(),
    'display': 'flex',
    'flex-direction': 'column',
    'transition': 'height .4s cubic-bezier(0.55, 0, 0.55, 0.2)'
  });
  $('.resizeMe img').each(function() {
    var src = $(this).attr('src');
    $('.resizeMe').append('<div style="flex-basis: 50%; background-image: url(' + src + '); background-size:cover; background-position: center center"' + '</div>');
    $(this).remove();
  })
};
document.resizePictures = function() {
  if ($('#theContainer').outerWidth() > 768) {
    $('.resizeMe').css({
      'height': $('#theContainer .col-sm-6').eq(1).height()
    });
  } else {
    $('.resizeMe').css({
      'height': $('.resizeMe').outerWidth()
    });
  }
	$('.theWidth').text($('body').outerWidth());
};
$(document).ready(function(){$('.theWidth').text('after dom ready: ' + $('body').outerWidth());});
$('.theWidthBeforeDomReady').text('before dom ready: ' + $('body').outerWidth());


var sm6height = $('#theContainer .col-sm-6').eq(1).height();
var imgHeight = $('#theContainer .col-sm-6').eq(1).find('img').height();
console.log("When called in <body>:");
console.log("#theContainer .col-sm-6 height: " + sm6height);
$('#theBody .sm6').text(sm6height);
console.log("Image height: " + imgHeight);
$('#theBody .imgH').text(imgHeight);

$(document).ready(function(){
	var sm6height = $('#theContainer .col-sm-6').eq(1).height();
	var imgHeight = $('#theContainer .col-sm-6').eq(1).find('img').height();
	console.log("When called in DOM Ready:");
	console.log("#theContainer .col-sm-6 height: " + sm6height);
	$('#DOMready .sm6').text(sm6height);
	console.log("Image height: " + imgHeight);
	$('#DOMready .imgH').text(imgHeight);
});

window.onload = function(){
	var sm6height = $('#theContainer .col-sm-6').eq(1).height();
	var imgHeight = $('#theContainer .col-sm-6').eq(1).find('img').height();
	console.log("When called in onLoad:");
	console.log("#theContainer...