JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">
<table>
    <tr>
        <td>
            <div class="child" style="border:solid 1px red;">

            </div>
        </td>
                <td>
            <div class="child" style="border:solid 1px red;">
              <p>this is a test
            </p>
            </div>
        </td>
    </tr>
</table>

CSS

.child {
 min-width:50px;
 min-height:50px;
}

JavaScript

var defaultHeight = $('.child').height();
  var defaultWidth = $('.child').width();
 $('.child').resizable({
        animate: false,
        helper: '.ui-resizable-helper',
        minHeight:defaultHeight,
        minWidth:defaultWidth,
        maxWidth: 500,
        maxHeight: 500,     
        aspectRatio: true,
        containment: 'document'
    });
     $('.child').draggable({
        animate: false,
        helper: '.ui-resizable-helper',
        minHeight:defaultHeight,
        minWidth:defaultWidth,
        maxWidth: 500,
        maxHeight: 500,     
        aspectRatio: true,
        containment: 'document'
    });