SOURCE

  const element = document.querySelector('.resizable');
  const resizer = document.querySelector('.resizer');

  resizer.addEventListener('mousedown', function (e) {
    e.preventDefault();
    window.addEventListener('mousemove', resize);
    window.addEventListener('mouseup', stopResize);
  });

  function resize(e) {
    element.style.width = e.pageX - element.getBoundingClientRect().left + 'px';
    element.style.height = e.pageY - element.getBoundingClientRect().top + 'px';
  }

  function stopResize() {
    window.removeEventListener('mousemove', resize);
    window.removeEventListener('mouseup', stopResize);
  }

<div class="resizable" style="width: 200px; height: 200px; background-color: lightblue;">
  <div class="resizer"></div>
</div>

  .resizable {
      position: relative;
      display: inline-block;
    }

    .resizable .resizer {
    
   
      background: red;
      position: absolute;
      right: 0;
      width:4px;
      top:0;
      bottom:0;
  
      cursor: ew-resize;
    }