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"  
    
});