JSFiddle - React, Tailwind, and code Playground

HTML

<div style="user-select:none;padding:30px;padding-left:80px">
  Click on th and drag... <span id="dx"></span>
  <table id="sbs" style="width:100%;border:0px;border-collapse:collapse;">
    <tr>
      <td class="cLeft cSide">
        <iframe class="cFrame" src="{MyLeftPage}">
        </iframe>
      </td>
      <td class="resize-bar">
        <div class="resize-panel"></div>
      </td>
      <td class="cSide">
        <iframe class="cFrame" src="{MyRightPage}">
        </iframe>
      </td>
    </tr>
  </table>
</div>

CSS

.resize-bar {
  width: 5px;
  cursor: col-resize;
  position:relative;
  background: linear-gradient(90deg, rgba(46,46,46,1) 0%, rgba(227,227,227,1) 64%, rgba(154,154,154,1) 100%);
  xbackground-color:#AA3322;
  margin:20px;
}
.resize-panel {
  height: 100%;
  background-color: #DDDDDD00;
  display: inline-block;
  position: absolute;
  top:0px;
  left:-2px;
  right:-2px;
  cursor: col-resize;
}
.resize-panel.rx {
    left:-400px;
    right:-400px;
}

.cSide {
  min-width:200px;
}

.cFrame {
  width: 100%;
  border: 1px solid #DDD;
  height: calc(100vh - 170px);
  overflow-x:scroll;
  border:0px;
}

JavaScript

$(function() {

  var pressed = false;
	var dvLeft = 0;
  var dvWidth = 0;
  
  $(".resize-bar").mousedown(function(e) {
    pressed = true;
    dvLeft = $("#sbs").position().left;
    dvWidth = $("#sbs").width();
    $(".resize-panel").addClass("rx");
    e.stopPropagation();
  });

  $(".resize-panel").mousedown(function(e) {
    pressed = false;
  });

  $(document).mousemove(function(e) 
  {
    if (e.which == 1 && pressed) 
    {
      cPos = e.pageX - dvLeft;

      if (cPos <= 1) cPos = 1;
      if (cPos >= dvWidth) cPos = dvWidth;

      $(".cLeft").width(cPos);
    }
    $("#dx").text(e.which + ":" + pressed + ":" + e.pageX);
  });

  $(document).mouseup(function() {
    if (pressed) {
      $(".resize-panel").removeClass("rx");
      pressed = false;
    }
  });
});