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="layer" style="width: 150px;">
<div class="left ui-resizable-handle ui-resizable-w"></div>
<div class="right ui-resizable-handle ui-resizable-e"></div>
</div>
CSS
.layer {
float: left;
padding: 2px;
margin: 2px;
border: 1px solid black;
}
.ui-resizable-handle {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.right.ui-resizable-e {
border-left: 10px solid green;
}
.left.ui-resizable-w {
border-right: 10px solid green;
}
JavaScript
$('.layer').resizable({
handles: null
});