JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
 <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script src="http://layout.jquery-dev.net/download/jquery.layout-1.2.0.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js" type="text/javascript"></script> 

<script>

    $(document).ready(function () {
        var bodyLayout=$('body').layout({

         // using custom 'ID' paneSelectors
         north__paneSelector:  "#north_box"
      ,  west__paneSelector:   "#west_box"
      ,  center__paneSelector: "#center_box"

        ,applyDefaultStyles: true
        ,slidable : false
        ,slideTrigger_open : "mouseover"
        ,spacing_closed:               10
        ,spacing_open:10
        ,paneClass : "ui-widget-content"
        
        });

        bodyLayout.sizePane("west", 200);

        }
        );
        
        function addDiv()
        {
           var newContainer=$('<div  class="ui-widget-content" style="display:block;position:absolute;top:50px ;left:100px;width:100px;height:100px;border:1px solid red;"><h3 class="ui-widget-header">Resizable</h3></div>');
           $("#center_box").append(newContainer);
           newContainer.draggable();
           newContainer.resizable(
           {
                         handles: 'all' ,
                         autoHide: true 
            }                
           );
        }
        
</script>
</head>
<body>

<div id="north_box" class="ui-layout-north">
some content here
</div>

<div id="west_box" class="ui-layout-west ui-widget-header">
<BUTTON onClick="$('#center_box').width( $('#center_box').width() + 50 )">Wider</ 
BUTTON> 
<BUTTON onClick="$('#center_box').width(...