JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="left-side">.</div>
    <div id="separator" class="slider"></div>
    <div id="right-side">.</div>
</div>

CSS

.container {
    position: relative;
    
}

.slider {
    position: absolute;
    z-index: 2;
    width: 5px;
    cursor: col-resize;
    top: 0;
    bottom: 0;    
}






#container {
    box-sizing: border-box;
    padding: 20px;
    background-color: gray;
    height: 200px;
    position: relative;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}


#separator {
    top: 20px;
    left: 50px;
    bottom: 20px;
}

.slider.active  { background-color: gray; }

#left-side {
    z-index: 1;
    position: absolute;
    top: 20px;
    bottom: 20px;
    background-color: brown;
}
#right-side {
    z-index: 1;
    position: absolute;
    top: 20px;
    bottom: 20px;
    background-color: #CE6060;
}

JavaScript

(function () {
  function mouseDown (ev) {
    function mouseMove (ev) {
      originX = parseInt (window.getComputedStyle (slider).left, 10) + ev.screenX - originX;
      if (originX >= 5 && originX <= containerWidth - 10)
        slider.style.left = slider.previousElementSibling.style.width = 
            slider.nextElementSibling.style.left = originX + 'px';  
      originX = ev.screenX;
    }
    
    function mouseUp (ev) {
      document.removeEventListener ('mousemove', mouseMove, false)
      document.removeEventListener ('mouseup', mouseUp, false)
      slider.classList.remove ('active');
    }

    var slider = this,
        originX = ev.screenX,
        containerWidth = parseInt (window.getComputedStyle (slider.parentNode).width, 10);
    slider.classList.add ('active');
    document.addEventListener ('mousemove', mouseMove, false)
    document.addEventListener ('mouseup', mouseUp, false)
  }
    
  [].forEach.call (document.querySelectorAll ('.slider'), function (slider) {
      var left = slider.previousElementSibling,
          right = slider.nextElementSibling;
          
      slider.parentNode.classList.add ('container');

      slider.classList.remove ('active');
      slider.addEventListener ('mousedown', mouseDown, false);
      
      left.style.position = right.style.position = 'absolute';
      left.style.width = right.style.left = window.getComputedStyle (slider).left;
      left.style.left = right.style.right = '0px';
    });
}) ();