JSFiddle - React, Tailwind, and code Playground

by yahyaKACEM

HTML

<div class="left" style="width: 200px;">
    <div class="left-content">
        Left Column <br/><br/><br/>more rows please...<br/><br/><br/>more rows please...
    </div>
    <div class="border-right border"></div>
</div>
<div class="right" style="width: 200px;">
    <div class="right-content">
        Right Column <br/><br/><br/>more rows please...
    </div>
    <div class="border-left border"></div>
</div>
<div class="center">
    <div class="content">
        Center Column <br/><br/><br/>more rows please...
    </div>
</div>

CSS

.right, .center, .left {
  min-height: 500px;
}
.left {
  float: left;
  width: 200px;
  max-width: 300px;
  min-width: 100px;
  background: red;
  position: relative;
}
.left .left-content {
  padding: 5px;
}
.left .border-right, .right .border-left {
  position: absolute;
  top: 0;
  height: 100%;
  width: 5px;
  border: 2px outset #ccc;
  background: #999;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  cursor: col-resize;
}
.left .border-right {
  right: 0;
}
.right .border-left {
  left: 0;
}
.right {
  float: right;
  width: 200px;
  max-width: 300px;
  min-width: 100px;
  background: blue;
  position: relative;
}
.right .right-content {
  padding: 5px;
}
.center {
  margin: 0 200px;
  background: green;
}
.center .content {
  padding: 5px;
}

JavaScript

$(document).ready(function() {

    //Left column resizer
    var leftIsResizing  = false;
    var rightIsResizing = false;
    var resizeStart     = {};
    
    $('.left .border-right').mousedown(function(e) {
        leftIsResizing = true;
        resizeStart = {x: e.clientX, y: e.clientY};
        return false;
    });
    $('.right .border-left').mousedown(function(e) {
        rightIsResizing = true;
        resizeStart = {x: e.clientX, y: e.clientY};
        return false;
    });
    
    $(document).mousemove(function(e) {
        if(leftIsResizing) {
            //Get the difference
            var diff = {x: resizeStart.x - e.clientX,y: resizeStart.y - e.clientY};
            // set new starting point
            resizeStart = {x: e.clientX, y: e.clientY};
             // Set width of left container
            $('.left').width($('.left').width() - diff.x);
             //Set margin of center container
            $('.center').css('margin-left', parseInt($('.center').css('margin-left')) - diff.x);
        }else if(rightIsResizing){
            //Get the difference
            var diff = {x: resizeStart.x - e.clientX,y: resizeStart.y - e.clientY};
            // set new starting point
            resizeStart = {x: e.clientX, y: e.clientY};
             // Set width of left container
            $('.right').width($('.right').width() + diff.x);
             //Set margin of center container
            $('.center').css('margin-right', parseInt($('.center').css('margin-right')) + diff.x);
        }
    }).mouseup(function() {
        leftIsResizing  = false;
        rightIsResizing = false;
        return false;
    });    
});