JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css"
type="text/css" media="all"/>

    <div id="ParentDIV" style="margin-left:200px; width:500px; height:200px; background:lightgray;">                                <div class="dragClass"><p>Drag me around!</p></div>    
    </div>

CSS

.dragClass {
                font-family: Tahoma, sans;
                color: black;
                background: orange;
                border: 1px solid orange;
                width: 10em;
                height:auto;
                padding: 0.5em;
            }
        
        textarea {
                font-family: inherit;
                color: inherit;
                background: transparent;
                border: 0;
                width: 100%;
                height: 100%;
                resize: none;
            }
       .ui-resizable-helper { border: 2px dotted #00F; }

JavaScript

$(".dragClass").resizable({ containment: 'parent'})
               .draggable({ cursor: "move", delay: 100, containment: "#ParentDIV", scroll: false }); 



//$(".dragClass").resizable({ containment: 'parent'});