'jQuery - Draggable Div with width and height counter (Demo code included)

All.

I've been messing with this project for a few days, trying different codes, making some progress, then getting stuck.
The below code is the closest I've come to a working example.
This one counts the WIDTH from the LEFT panel.
I need it to count the WIDTH from the RIGHT panel.

--UPDATED--
I've made it drag from the RIGHT, and it calculates its width from the RIGHT. Unfortunately, the HEIGHT is still not working when the div grows in height, but the width counts.
As you will see when you run the demo below, when you drag the bar, the left panel does not stay attached, along with other issues.
Almost as if it was designed to run one way only.
I know I am missing something here, just not sure what?

Best Viewed In Full Screen.

Thank you.
Wayne

Here is the code

var info = document.getElementById('Info');
var left = document.getElementById('drag-left');
var right = document.getElementById('drag-right');
  $(function() {
    $(right).resizable({
      minHeight: 200,
      minWidth: 320
    });

    $(left).resizable({
      minHeight: 200,
      minWidth: 320

    });
  });
// Left Panel
$(right).resizable({
  handles: 'w',
  resize: function(event, ui) {
 // var width = $("body").width() - ui.size.width;
 // var height = $("body").height() - ui.size.height;
   var width = ui.size.width;
  var height = ui.size.height;
  $(left).width(left);
    $(info).text("Width: " + width + "px; & Height: " + height + "px;");
  }
});

/*This is to create the BAR in the middle to grab.
To change which one gets it, change the (e) to (w)
E = Left panel
W = Right Panel*/

.ui-resizable-w {
  background-color: black;
}
.ui-resizable-w:hover {
  cursor: col-resize;
}

* {
    box-sizing: border-box;
}
p {
    color: darkslategray;
}
.drag-container {
    display: flex;
    width:1000px;
    padding:5px;
}
 [class^=panel] {
 padding: 60px 24px;
 background-color: whitesmoke;
}
.panel-one {
    width: 100%;
    flex: 1 1 auto;
}
.panel-two {
    width: 60%;
}

#drag-right, #drag-left {
    min-height:200px;
    min-width:320px;
    border:1px double green;
}

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Simple JS Dragbar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

</head>
<body translate="no" >


<div class="drag-container">
  <div class="panel-one" id="drag-left">
    <h2>Panel 1</h2>
    <p>Look, everyone wants to be like Germany, but do we really have the pure strength of 'will'? But I know you in the future. I cleaned your poop. Large bet on myself in round one. Take me to your leader! My fellow Earthicans, as I have explained in my book 'Earth in the Balance'', and the much more popular ''Harry Potter and the Balance of Earth', we need to defend our planet against pollution. Also dark wizards.</p>
  </div>

  <div class="panel-two" id="drag-right">
    <h2>Panel 2</h2>
    <p>So, how 'bout them Knicks? You guys go on without me! I'm going to go… look for more stuff to steal! Guards! Bring me the forms I need to fill out to have her taken away! Do a flip! Calculon is gonna kill us and it's all everybody else's fault!</p>
  </div>
</div>

  <div style="float:right; height:30px; width:320px; border:1px double green; padding:40px 4px;">Width: 320px;<br />
<span id="Info">Information Goes Here</span>
  </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'jQuery - Draggable Div with width and height counter (Demo code included)

Sources

Related Questions