JSFiddle - React, Tailwind, and code Playground

by Pranesh Ravi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<div class="content">
  <div class="inner_content">
    <div class="left_content">
      <div class="video_content">
        <img src="https://mediaarchive.cern.ch/MediaArchive/Video/Public/Movies/CERN/2016/CERN-MOVIE-2016-041/CERN-MOVIE-2016-041-002/CERN-MOVIE-2016-041-002-posterframe-640x360-at-55-percent.jpg">
      </div>
      <div class="info_content">
        these height should be till bottom
      </div>
    </div>
  </div>
</div>

CSS

img {
  width: 100%;
}

.content {
  width: 100%;
  background: #fff;
  position: fixed;
  top: 80px;
  bottom: 0px;
}

.content .inner_content {
  position: relative;
  width: 100%;
  height: 100%;
}

.content .inner_content .left_content {
  position: absolute;
  background: #eee;
  left: 0;
  width: 40%;
  height: 100%;
  padding: 15px;
}

.content .inner_content .left_content .video_content {
  overflow-y: auto;
  display: inline-block;
  width: 100%;
}

.content .inner_content .left_content .info_content {
  background: #333;
  display: inline-block;
  overflow-y: auto;
  width: 100%;
  color: #fff;
  font-family: 'arial';
}

JavaScript

function resizeHeight() {
  var divHeight = $('.video_content').height();
  $('.info_content').css('height', (window.innerHeight - divHeight) + 'px');
}
$(window).resize(resizeHeight)

resizeHeight()