JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />


<p style="padding:10px;">
When you try to resize "w" or "e" by moving the mouse from the left y axis then the whole box moves from its position. If you do the opposite, resize "e" or "w" by moving the mouse from the right y axis then it behaves correctly, the whole box does not move, it just alters its width!.
</p>
    
<br /><br />

<div id="resizable" style="overflow:auto;width:300px" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable BUG</h3>
  
  

<div id="sideBar-inwrapper" class="" style="overflow:auto;">

<div class="imgWrapper"></div>

<div class="imgWrapper"></div>


</div>
  
  
  
</div>

CSS

#resizable { padding: 0.5em; margin: 20%; }
  #resizable h3 { text-align: center; margin: 0; }
.imgWrapper{display:inline-block;vertical-align:top;background:#333;width:120px;height:120px;border:white solid 2px;margin:10px}

JavaScript

$( "#resizable" ).resizable({
    
    handles: "e, w"   
    
    });