JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<div id="wrap1">
  <div class="header">
    Some header
  </div>
  
  <div id="content1">
    
  </div>
</div>

<div id="wrap2">
  <div class="header">
    Some header
  </div>
  
  <div id="content2">
    
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  border: 0;
  margin: 0;
  padding: 0;
}
#wrap1, #wrap2 {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0; 
  overflow: auto;
}

#wrap1 {
  top: 0;
  bottom: 50%;
}

#wrap2 {
  top: 50%;
  bottom: 0;
}

.header {
  flex: 0 0 2rem;
  background: darkgrey;
}

#content1, #content2 {
  flex: 1;
}

#content1 {
  background: lightblue;
}

#content2 {
  background: lightgreen;
}

JavaScript

$(function() {
  var content1 = $('#content1');

  var div = $('<div/>', {width: content1[0].clientWidth, height: content1[0].clientHeight});
  content1.append(div);
	
  var content2 = $('#content2');
  var canvas = $('<canvas/>', {width: content2[0].clientWidth, height: content2[0].clientHeight});

  content2.append(canvas);
})