JSFiddle - React, Tailwind, and code Playground

by Vico Bertogli III

HTML

<div id="cont">
        <div id="test">
    
        </div>
        <div id="test2">
        
        </div>
        <div id="drag">
        
        </div>
    </div>

CSS

#cont{
            width: 200px;
            height:200px;
            margin:0 auto;
            border: 1px solid #444;
            position: relative;
        }
        
        #test{
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: #ddd;
        }
        
        #test2{
            position: absolute;
            height: 100%;
            background-color: #eee;
        }
        
        #drag{
            position: absolute;
            width: 5px;
            height: 100%;
            background-color: #444;
        }

JavaScript

$(document).ready(function(){
    $('#drag').on('mousedown', function(e){
        var $dragable = $(this).parent(),
            startWidth = $dragable.width(),
            pX = e.pageX;
        
        $(document).on('mouseup', function(e){
            $(document).off('mouseup').off('mousemove');
        });
        $(document).on('mousemove', function(me){
            var mx = (me.pageX - pX);
            //var my = (me.pageY - pY);
            
            $dragable.css({
                left: mx / 2,
                width: startWidth - mx,
                //top: my
            });
        });
                
    });
});