JSFiddle - React, Tailwind, and code Playground

by Egor Jvechkin

HTML

<script src="https://unpkg.com/split.js/split.min.js"></script>
<div class="container default">  
  <div class="red">1</div>
  <div class="blue">2</div>
  <div class="green">	You can spell check very long text areas without compromising any performance hits. Regardless of the size of the text, UltimateSpell only sends small portions of the text to the server as needed, while the user spell checks through the text.You can spell check very long text areas without compromising any performance hits. Regardless of the size of the text, UltimateSpell only sends small portions of the text to the server as needed, while the user spell checks through the text.</div>
</div>

<button id='btn'>RESIZE RIGHT PANEL</button>

SCSS

/* div { width: 250px; height: 250px; } */
.container { 
  width: 500px; 
  height: 300px; 
  background: #e2e2e2; 
  display: grid; 
  grid-template-columns: 50% 1fr;
  grid-template-rows: 50% 10px 1fr;
  overflow: hidden;
 }
 
.red { background: tomato; opacity: .7; grid-area: left; }
.blue { background: cyan; opacity: .7; grid-area: right; }
.green { background: #10b010; opacity: .7; grid-area: bottom; overflow: auto; }

.default { grid-template-areas: 'left right' 'gutter gutter' 'bottom bottom' }
.resplit { grid-template-areas: 'left right' 'gutter right' 'bottom right' }

.gutter { grid-area: gutter;}

JavaScript

const container = document.getElementsByClassName('container')[0];
const red = document.getElementsByClassName('red')[0];

const handler = () => {
  container.classList.toggle('default');
  container.classList.toggle('resplit');
};

btn.onclick = handler;

Split(['.blue', '.green'], {
	sizes: [100, 100], 
  direction: 'vertical',
  minSize: [0, 0],
  elementStyle: function(dimension, size, gutterSize) {
    container.style['grid-template-rows'] = `${100 - (size / 2)}% 10px 1fr`;
  	return { 'justify-self': 'stretch', 'align-self': 'stretch' };
  } 
 });