JSFiddle - React, Tailwind, and code Playground

by rchod

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 
 <div id="container">
   <div id="resizable" class="ui-widget-content">
   </div>
 </div>

CSS

#resizable { 
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0.5em;
  }
  #resizable h3 { 
    text-align: center;
    margin: 0;
  }
  
  #container{
    position: absolute !important;
    top: 50px;
    left: 80%;
    width: 100px;
    height: 150px;
    background: green;
  }
  
  .ui-resizable-nw{
    width: 30px !important;
    height: 30px !important;
    background: red;
  }

JavaScript

$(function() {
    $( "#container" )
    .resizable({
  		handles: "nw, n, w",
      stop: function(e, $this) {
            $(this).css({
                position: "absolute"
            });
        }
	});
});