JSFiddle - React, Tailwind, and code Playground

by jeevankk

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css">
<html>
    <head>
    </head>
    <body>


<div class="mydiv2">
        </div>
        </body>
    <br />
    <div class="mydiv">
<iframe id="frame" src="http://google.com" />
</div>
</html>

CSS

.mydiv
{
    width:100px;
    height:100px;
    background:red;
}
#frame
{
    width:100px;
    height:100px;
}

.mydiv2
{
    width:100px;
    height:100px;
    background:green;
    position:fixed;
    top:200px;
}

JavaScript

$(document).ready(function() {

    $('.mydiv').resizable({
                minWidth:100,
                maxWidth:600,
                alsoResize: "#frame",
                handles:'e'
            });
    
    $('.mydiv2').resizable({
                minWidth:100,
                maxWidth:600,
                handles:'e'
            });
    
});