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">left</div>
<div class="center">center</div>
<div class="right ui-resizable-handle ui-resizable-e">right</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;
}
.draggable {
    cursor: move;
}
.resizable {
    border: 1px dashed #000000;
    position: relative;
    min-height: 50px;
}
.ui-resizable-handle {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
    position: absolute;
}
.ui-resizable-nw {
    left: -5px;
    top: -5px;
    cursor: nw-resize;
}
.ui-resizable-ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}
.ui-resizable-sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}
.ui-resizable-se {
    bottom: -5px;
    right:-5px;
    cursor: se-resize;
}
.ui-resizable-n {
    top: -5px;
    left:50%;
    cursor: n-resize;
}
.ui-resizable-s {
    bottom: -5px;
    left: 50%;
    cursor: s-resize;
}
.ui-resizable-w {
    left:-5px;
    top:calc(50% - 5px);
    cursor: w-resize;
}
.ui-resizable-e {
    right:-5px;
    top:calc(50% - 5px);
    cursor: e-resize;
}

JavaScript

$('.layer').resizable({
      handles: {
        'nw'
        'ne'
        'sw'
        'se'
        'n'
        'e'
        's'
        'w'
    }
});