Resizeable Demo

HTML

<div id="resizeable">
  <div id="handle"></div>
</div>

CSS

#resizeable {
  --resizeable-width: 300px;
  height: 100vh;
  width: var(--resizeable-width);
  min-width: var(--min-width);
  max-width: var(--max-width);
  background-color: grey;
}

#handle {
  float: right;
  height: 100%;
  width: 1px;
  background-color: blue;
  z-index: 1;
}

#handle::after {
  content: "";
  width: 9px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin-left: -4px;
  background-color: transparent;
  cursor: ew-resize;
  z-index: 2;
}



body {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

JavaScript

const getResizeableElement = () => { return document.getElementById("resizeable"); };
const getHandleElement = () => { return document.getElementById("handle"); };
const minPaneSize = 150;
const maxPaneSize = document.body.clientWidth * .5
getResizeableElement().style.setProperty('--max-width', `${maxPaneSize}px`);
getResizeableElement().style.setProperty('--min-width', `${minPaneSize}px`);



const setPaneWidth = (width) => {
  getResizeableElement().style
    .setProperty('--resizeable-width', `${width}px`);
};

const getPaneWidth = () => {
  const pxWidth = getComputedStyle(getResizeableElement())
    .getPropertyValue('--resizeable-width');
  return parseInt(pxWidth, 10);
};

const startDragging = (event) => {
  event.preventDefault();
  const host = getResizeableElement();
  const startingPaneWidth = getPaneWidth();
  const xOffset = event.pageX;

  const mouseDragHandler = (moveEvent) => {
    moveEvent.preventDefault();
    const primaryButtonPressed = moveEvent.buttons === 1;
    if (!primaryButtonPressed) {
      setPaneWidth(Math.min(Math.max(getPaneWidth(), minPaneSize), maxPaneSize));
      document.body.removeEventListener('pointermove', mouseDragHandler);
      return;
    }

    const paneOriginAdjustment = 'left' === 'right' ? 1 : -1;
    setPaneWidth((xOffset - moveEvent.pageX ) * paneOriginAdjustment + startingPaneWidth);
  };
  const remove = document.body.addEventListener('pointermove', mouseDragHandler);
};

getHandleElement().addEventListener('mousedown', startDragging);