Convert js to jq to resize one object compared to the other next to it

Question

I have a problem that I am dealing with, need a resizable window dragged by the side.

Unfortunately resizable() in jq doesn't work for me and resize in css doesn't give me the proper solution I need. I was searching the web and found a solution that might work for me, unfortunately it is in js and I need it in jq

var resize = document.querySelector("#resize");
var left = document.querySelector(".left");
var container = document.querySelector(".container");
var moveX =
   left.getBoundingClientRect().width +
   resize.getBoundingClientRect().width / 2;

var resize = document.querySelector("#resize");
var left = document.querySelector(".left");
var container = document.querySelector(".container");
var moveX =
   left.getBoundingClientRect().width +
   resize.getBoundingClientRect().width / 2;


var drag = false;
resize.addEventListener("mousedown", function (e) {
   drag = true;
   moveX = e.x;
  console.log(moveX);
});

container.addEventListener("mousemove", function (e) {
   moveX = e.x;
   if (drag)
      left.style.width =
         moveX - resize.getBoundingClientRect().width / 2 + "px";
});


container.addEventListener("mouseup", function (e) {
   drag = false;
});

Here it is also on codepen, so you have idea how it should work [codepen](https://codepen.io/LukAnd/pen/ZEMgLoq?editors=0010)

The function getBoundingClientRect is not in jq and what I tried to exchange it with was width() then x with offset().left but I cannot recreate it fully. If someone would be so nice and help me, I appreciate it. Thanks