JSFiddle - React, Tailwind, and code Playground

by _kdts

HTML

<div class="left">
  This is the left content
</div>
<div class="divider">
</div>
<div class="right">
  This is the right content
</div>

CSS

.left {
  position: fixed;
  top: 0px;
  left: 0px:
  width: 80px;
  bottom: 0px;
  background-color: #ccc;
}

.divider {
  position:fixed;
  top: 0px;
  left: 80px;
  width: 20px;
  bottom: 0px;
  background-color: blue;
}

.right {
  position: fixed;
  top: 0px;
  right: 0px;
  left: 220px;
  bottom: 0px;
}

JavaScript

var isMouseDown = false, 
		leftContent = document.querySelector('.left'),
		divider = document.querySelector('.divider'),
    rightContent = document.querySelector('.right'),
    startPos = null;
    
divider.addEventListener('mousedown', function (event) {
	isMouseDown = true;
});

divider.addEventListener('mouseup', function (event) {
	isMouseDown = false;
});

divider.addEventListener('mousemove', function (event) {
	if (isMouseDown) {
  	leftContent.style.width = (event.clientX - 10) + 'px';
    divider.style.left = (event.clientX - 10) + 'px';
    rightContent.style.left = (event.clientX + 10) + 'px';
  }
});