JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<div class="1" style="border:1px solid black; height:100px;width:100px"><div class="2" style="border:1px solid black; height:50px;width:50px"></div></div>
CSS
.layer, .left, .center, .right {
float: left;
padding: 2px;
margin: 2px;
border: 1px solid black;
}
.right.ui-resizable-e {
width: auto;
height: auto;
top: auto;
right: 0px;
}
.right.ui-resizable-handle {
font-size: inherit;
}
.left.ui-resizable-w {
width: auto;
height: auto;
top: auto;
left: 0px;
}
.left.ui-resizable-handle {
font-size: inherit;
}
JavaScript
$('.1').resizable({handle:'ui-resizable-handle';});
$('.2').resizable();