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; left: 50px; top: 50px;">
    <div class="left ui-resizable-handle ui-resizable-w">
        <div></div>
        <div></div>
    </div>
    <div class="right ui-resizable-handle ui-resizable-e">
        <div></div>
        <div></div>
    </div>
</div>

CSS

.layer {
    float: left;
    padding: 2px;
    margin: 2px;
    border: 1px solid black;
}


.left.ui-resizable-w div:nth-child(1)
{
    border-top: 10px solid transparent;
    border-bottom: 10px solid green;
    border-left: 10px solid transparent;
    border-right: 10px solid green;
}
.left.ui-resizable-w div:nth-child(2)
{
    width: 20px;
    height: 20px;
    background-color: green;
}

.right.ui-resizable-e div:nth-child(1)
{
    border-top: 10px solid transparent;
    border-bottom: 10px solid green;
    border-left: 10px solid green;
    border-right: 10px solid transparent;
}
.right.ui-resizable-e div:nth-child(2)
{
    width: 20px;
    height: 20px;
    background-color: green;
}

JavaScript

$('.layer').resizable({
    handles: null
});