JSFiddle - React, Tailwind, and code Playground

by Bryan McIntosh

HTML

<div class="column">
  <div class="top">
      test
  </div>
    
    <div class="slider"></div>
    
  <div class="bot">
      test
  </div>
</div>

CSS

html {    height: 100%;    width: 100%;}
body {    height: 100%;}

.column {
    width: 100%;
    height: 100%;
    border: solid #000;
}

.top {
    width: 100%;
    height: 50%;
    background-color: #989898;
}

.bot {
    width: 80%;
    height: 50%;
    background-color: #686868;
}

.slider {
    width: 100%;
    height: 10px;
    background-color: #000;
}

JavaScript

$(document).ready(function(){
	$('.slider').on('mousedown',function(e){
		$('.column').on('mousemove',function(e){
			diff = $('.slider').offset().top + 5 - e.pageY ;
      
			$('.top').height($('.top').height()-diff);
			$('.bot').height($('.bot').height()+diff);
		});
	});
	$('.column').on('mouseup',function(){
		$('.column').off('mousemove');
	});
});