JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="top"></div>
    <div class="bar"></div>
    <div class="bottom"></div>
</div>

CSS

.container {
    width: 100%;
    height: 100%;
    position: fixed;
}
.container > .top {
    height: 200px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    overflow: auto;
    background: blue;
}
.container > .bottom {
    position: absolute;
    top: 220px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    background: red;
}
.container > .bar {
    height: 20px;
    position: absolute;
    top: 200px;
    right: 0;
    left: 0;
    background: green;
    cursor: move;
}

JavaScript

(function(){
    var top = document.querySelector('.top'),
        bottom = document.querySelector('.bottom'),
        bar = document.querySelector('.bar'),
        offset,
        barHeight;
    
    var start = function(e){
        offset = e.clientY - bar.offsetTop;
        barHeight = bar.offsetHeight;
        window.addEventListener('mousemove', move, true);
        window.addEventListener('mouseup', stop, true);
    };
    
    var move = function(e){
        var y = e.clientY - offset;
        top.style.height = [y, 'px'].join('');
        bar.style.top = [y, 'px'].join('');
        bottom.style.top = [y + barHeight, 'px'].join('');
    };
    
    var stop = function(e){
        window.removeEventListener('mousemove', move, true);
        window.removeEventListener('mouseup', stop, true);
    };
    
    bar.addEventListener('mousedown', start, true);
})();