JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.min.css">
<div id="wrapper"></div>

CSS

#wrapper {
    margin: 20px;
    position:relative;
}
.ui-resizable-helper { border: 1px dotted gray; }

JavaScript

var rowHeight = 41;
var tableGrid = [121, rowHeight];
var marker = $("<div>");
marker.css( { position: "absolute", "background-color": "rgba(255,0,0,0.5)", "border-radius": "3px" } );
marker.offset( { top:55, left: 66 } )
              .height( rowHeight )
              .width( 120 )
              .draggable( { grid: tableGrid } )
              .resizable( { grid: tableGrid, animate: true, minHeight: rowHeight, maxHeight: rowHeight, handles: "e, w", start:function(event,ui){console.log(ui.originalPosition,ui.position);},
                                          resize:function(event,ui){console.log(ui.originalPosition,ui.position);},
                                          stop:function(event,ui){console.log(ui.originalPosition,ui.position);} } );
$( "#wrapper" ).append( marker );