JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <div id="container">
        <div id="bar"></div>
        <div id="top"></div>  
        <div id="bottom"></div>
        <span id="stop-top">-</span>
        <span id="stop-bottom">-</span>  
    </div>
<br />
<div>
    Drag the small blue rectangle <br />
// to do - contain movement to inside two orange spans
</div>

CSS

#container { height: 500px; width: 500px; border: 5px solid black; padding: 4px;}
#bar { height: 5px; width 100%; background-color: blue; top: 75px; }
#top { background-color: #DBEAF9; height:50px; top: 0px; }
#bottom { background-color: #386A96; height:450px; overflow: auto; }

#stop-top { bottom: 450px; position:relative; height: 2px; background-color:orange;}

#stop-bottom { bottom: 50px; position:relative; height: 2px; background-color:orange;}

JavaScript

$(document).ready(function () {

    var containmentTop = $("#stop-top").position().top;
    var containmentBottom = $("#stop-bottom").position().top;
    
    $('#bar').draggable({axis: 'y', containment : [0,containmentTop,0,containmentBottom] });
    //to do -- set the containment to be between the two orange dashes.
    //should i use:
    // containment: [x1,y2,x2,y2]?
    //or can I innerWrap('#container') to make another div div to act as      //   my 'contaimentBox'?

    

    $('#bar').on('dragstop', function () {
    
     var h = $('#bar').css('top');
     var c = $('#container').height();
        
     h = parseInt(h,10);
        
     var bH = c-h;
       
     $('#top').height(h);
        
     $('#bottom').css({'top': 5 + h, 'height': bH});
        
    });
    
    $('#bar').trigger('dragstop');
    
});