JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
<div class="square ui-widget ui-widget-content"  id="div1">resize horizontal</div>
<div class="square ui-widget ui-widget-content"  id="div2">resize vertical</div>
<div class="square ui-widget ui-widget-content"  id="div3" style="clear:left">move horizontal</div>
<div class="square ui-widget ui-widget-content"  id="div4">move vertical</div>

CSS

.square { font-size: 12px;float:left;width:100px;height:100px;}

JavaScript

$("#div1").resizable({
    grid: [1, 10000]
});
$("#div2").resizable({
    grid: [10000, 1]
});
$("#div3").draggable({
    grid: [1, 10000]
});
$("#div4").draggable({
    grid: [10000, 1]
});