如何创建垂直拖动以调整大小的分隔线？

<div class="content"></div>
<div class="divider"></div>

.content {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.divider {
  width: 5px;
  height: 100%;
  background-color: #ccc;
  cursor: col-resize;
}

var divider = document.querySelector('.divider');
var content = document.querySelector('.content');
var isDragging = false;

divider.addEventListener('mousedown', function(e) {
  isDragging = true;
});

document.addEventListener('mousemove', function(e) {
  if (isDragging) {
    var x = e.pageX;
    var contentWidth = content.offsetWidth;
    var dividerWidth = divider.offsetWidth;
    var newWidth = (x / contentWidth) * 100;
    
    content.style.width = newWidth + '%';
    divider.style.left = newWidth + '%';
  }
});

document.addEventListener('mouseup', function(e) {
  isDragging = false;
});