Javascript 编辑可调整大小的div的脚本

我找到了这个垂直调整div大小的脚本。

我可以使用它，但现在我需要修改它以确保水平调整另一个div的大小。 我试图修改它，但结果不是我想要的，有些特性不起作用

例如：

let blockH = document.querySelector("#div1"),
  sliderH = document.querySelector(".sliderH");

sliderH.onmousedown = function dragMouseDown(e) {
    let dragX = e.clientX;
  document.onmousemove = function onMouseMove(e) {
    blockH.style.width = blockH.offsetWidth + dragX + "px";
    dragX = e.clientX;
}

document.onmouseup = () => document.onmousemove = document.onmouseup = null;
}

---

---

但效果不是很好

有人可以帮我编辑脚本以水平调整大小吗？ 多谢各位

<div class="container">
  <div class="block" id="div1">
    Block 1
  </div>
  <div class="sliderH"></div>
  <div class="block" id="div2">
    Block 2
  </div>
</div>

#div2{
     flex: 1; 

}

#div1{
  resize: horizontal; 
  overflow: auto; 
}

.sliderH {
   cursor: col-resize;
   user-select: none; 
   width: 10px;
 }
  .container {
   display: flex;
   flex-direction: row;
   width: 100%;
   }