JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<div id="explanation">This element behaves inconsistently depending on the direction it is resized to: Drag east and you get widths of 50+100*n ; Drag west and you get 100*n; Drag south and it stays at 50; Drag north and it automatically changes to 150.</div>
<div id="grid"></div>
<div id="element"></div>

CSS

#element {
    height:50px;
    width:50px;
    position:relative;
    top:200px;
    left:200px;
    background-color: blue;
    margin:0;
}
#grid {
    border:1px solid #ccc;
    height:500px;
    width:500px;
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0) 98%, #7db9e8 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0) 98%, #7db9e8 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0) 98%, #aaaaaa 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0) 98%, #aaaaaa 100%);
    background-size: 50px 50px;
}

JavaScript

$('#element').resizable({
    grid: [100, 10],
    handles: "n,e,s,w"

});