JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<div id = "par" class = "ui-draggable" style= "position: relative; height: 200px; width: 400px;outline:2px solid green">
     <div width="100%" style="outline:2px solid yellow ; height : 15%">
         <h3>Title </h3>
    </div>
   
    <div id = "div1" style="float:left;outline:2px solid blue; width:25%; height : 85%">
        <h1>DIV 1</h1>
    </div>
    
    <div id = "div2" style="overflow:auto; float:left;outline:2px solid red; width: 75% ; height:85% " >
        <svg id = "svg2" viewBox="0 0 130 70";perserveAspectRatio ="xMinYMin" style = "height:200" >
           
             <g transform = "translate(0, 20)">
                <text>text1 </text>
            </g>
             <g transform = "translate(0, 40)">
                 <text>text2 </text>
            </g>
             <g transform = "translate(0, 60)">
                <text>text3 </text>
            </g>
             <g transform = "translate(0, 80)">
                 <text>text4 </text>
            </g> 
             <g transform = "translate(0, 100)">
                 <text>text5 </text>
            </g> 
              <g transform = "translate(0, 120)">
                 <text>text6 </text>
            </g> 
             <g transform = "translate(0, 140)">
                 <text>text7 </text>
            </g> 
             <g transform = "translate(0, 160)">
                 <text>text8 </text>
            </g> 
              <g transform = "translate(0, 180)">
                 <text>text9 </text>
            </g> 
              <g transform = "translate(0, 200)">
                 <text>text10 </text>
            </g>     
        </svg>
   </div>
</div>

<script>

JavaScript

$('#par').resizable({
 handles: 'se',
 aspectRatio: 400/200
});