JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<p><a href="http://bugs.jqueryui.com/ticket/8932">jQuery UI #8932</a>: Issue with <code>box-sizing: border-box</code> and <code>padding</code> on a <code>resizable</code>.  Remove the <code>box-sizing</code> or <code>padding</code> from this example and everything works fine.</p>

<div id="resizable"></div>

CSS

body { padding: 20px; }
p { margin: 0 0 20px 0; line-height: 1.5; }

.ui-resizable {
    width: 150px;
    height: 150px;
    border: 1px dotted black;
    padding: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

$( '#resizable' ).resizable();