How to make HTML elements resizable using pure JavaScript?

To make HTML elements resizable using pure JavaScript, we add the mousemove event listener.

For instance, we write

const div = document.querySelector(`div.before`);
const box = document.querySelector(`div.container`);
box.addEventListener(`mousemove`, (e) => {
  const { offsetX, offsetY } = e;
  div.style.width = offsetX + `px`;
});

to select the divs with querySelector.

And we add a mousemove event listener for the box div with addEventListener.

In the event listener, we set the width of the div to the offsetX value to change the width when we move the mouse.