JSFiddle - React, Tailwind, and code Playground

by dropoff

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block_height"></div>
<div class="info-images" style="clear:both;">
  <div class="info-images-wrap">
    <ul class="info-images-thumbnails">
      <li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1-350x455.jpg"></a></li>
      <li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_1_1.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_1_1-595x774.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_1_1-350x455.jpg"></a></li>

      <li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/09/product-detail-5.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/09/product-detail-5.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/09/product-detail-5.jpg"></a></li>

      <li><a href="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_2_1.jpg" data-image="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_2_1-595x774.jpg"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/10/5696300305_2_2_1-350x455.jpg"></a></li>
    </ul>
  </div>
  <div class="info-image-wrap">
    <a href="#"><img src="http://zella.nasatheme.com/wp-content/uploads/2018/11/5696300305_2_6_1.jpg"></a>
  </div>
</div>

CSS

.info-images-wrap {
  float: left;
  width: 15%;
  background:red;
}

.info-image-wrap {
  float: right;
  width: 85%;
  background:green;
}

.info-image-wrap img {
  max-width: 100%;
  max-height: 100%
}

.info-images-thumbnails {
  margin: 0 10px 0 0;
  padding: 0;
  list-style-type: none;
}

.info-images-thumbnails li {
  display: block;
  width: 50px;
  height: 90px;
}

.info-images-thumbnails li img {
  max-width: 100%;
  max-height: 100%
}

JavaScript

var core = core || {};

core.scripts = (function(a) {

  this.images_blocks = function(a) {
    // блок с которого берем высоту
    var image_height = a(".info-image-wrap").height();
    // блок, которому нужно выставить высоту
    var images_wrap = a(".info-images-wrap");

    a(".block_height").html(image_height);

    images_wrap.height(image_height);
  }

  this.info = function(a) {
    // выставляем высоту по дефолту
    core.scripts.images_blocks(a);

    // в случае, если кликнули на мелкую картинку, то обновляем высоту блока
    a('.info-images-thumbnails').on('click', 'a', function(e) {
      e.preventDefault();
      a('.info-image-wrap img').attr('src', a(this).data('image'));

      core.scripts.images_blocks(a);
    });
  }

  return this;

}).call(core.scripts || {}, jQuery);

$(document).ready(function() {
  core.scripts.info($);

});