JSFiddle - React, Tailwind, and code Playground

by mizobata

HTML

<div style="display:flex">
<div id="box1" class="border box">
  <div class="handle"></div>
</div>

CSS

.border {
  border: 1px solid #ccc;
}

.box {
  width: 50px;
  height: 100px;
  position: relative;
}

.handle {
  width: 5px;
  height: inherit;
  background: steelblue;
  position: absolute;
  right: 0;
  cursor: col-resize;
}

JavaScript

const handleElm = document.querySelector('.handle');
const boxElm = document.querySelector('#box1');

const mouseMove = (e) => {
  const { x } = boxElm.getBoundingClientRect()
  boxElm.style.width = (e.x - x) + 'px'
}

const mouseUp = (e) => {
  const { x } = boxElm.getBoundingClientRect()
  boxElm.style.width = (e.x - x) + 'px'
  window.removeEventListener('mousemove', mouseMove)
  window.removeEventListener('mouseup', mouseUp)
}

handleElm.addEventListener('mousedown', e => {
  window.addEventListener('mousemove', mouseMove)
  window.addEventListener('mouseup', mouseUp)
});