JSFiddle - React, Tailwind, and code Playground

by Bill Morris

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css">
<div class='elementResizable'>
<label>
  [10] buyer-first-name
</label>

    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
</div>

CSS

body {
  background-color: #ddd;
}
.elementResizable {
    border: 1px dashed #000000;
    width: 300px;
    height: 140px;
    _overflow: hidden;
    position: relative;
    min-height: 1.5rem;
    min-width: 5rem;
    font-family: sans-serif;
    white-space: nowrap;
}
.elementResizable .ui-resizable-handle {
  opacity: 0;
  transition: all .5s;
  width: 7px;
  height: 7px;
  background-color: #088;
  border: 1px solid #000000;
  position: absolute;  
}
.elementResizable:hover .ui-resizable-handle {
  opacity: 1;
}
.elementResizable > label {
  border: 1px solid rgba(255, 0, 0, 0.5);
  display: inline-block;
}
#nwgrip {
    left: -5px;
    top: -5px;
}
#negrip{
     top: -5px;
     right: -5px;
}
#swgrip{
    bottom: -5px;
    left: -5px;
}
#segrip{
     bottom: -5px;
    right: -5px;
}
#ngrip{
     top: -5px;
    left: 50%;
transform: translateX(-50%);
}
#sgrip{
bottom: -5px;
left: 50%;
transform: translateX(-50%);

}
#wgrip{
     left: -5px;
     top: 50%;
     transform: translateY(-50%);
}
#egrip{
     right: -5px;
     top: 50%;
     transform: translateY(-50%);
}

JavaScript

$('.elementResizable').resizable({
    handles: {
        'nw': '#nwgrip',
        'ne': '#negrip',
        'sw': '#swgrip',
        'se': '#segrip',
        'n': '#ngrip',
        'e': '#egrip',
        's': '#sgrip',
        'w': '#wgrip'
    }

});


$( ".elementResizable" ).resizable( "option", "minWidth", (ui, event)=>{
    const $this = $(this);
    const label = $this.find("label");
		return label.width();
});

$( ".elementResizable" ).resizable( "option", "minHeight", (ui, event)=>{
    const $this = $(this);
    const label = $this.find("label");
		return label.height();
});