JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/1.7.2/themes/base/ui.resizable.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="divTest"><div id="divHeight">height: </div></div>

CSS

body
{
    padding:0px;
}

#divTest
{
    width: 100%;
    /*height: 0px;*/
    color:white;
    padding:0px 0px 10px 0px;
    background:url("http://dtm.dijitheme.com/static/button_thin_arrow_down.png") bottom no-repeat;
    background-color:silver;
} 

#divHeight
{
    height:40px;
}

.ui-resizable-s {
    bottom: -5px;
    height: 15px;
    background: rgba(0,0,255,0.3);
}

JavaScript

$(document).ready( function() {
    $( "#divTest" ).resizable({
        maxHeight: 200,
        maxWidth: 100,
        minHeight: 0,
        minWidth: 100,
        handles:'s',
        resize: function(event, ui) {
            $( "#divHeight" ).empty().append("height: " + $(this).height());
        }
    });
    
    $('.ui-resizable-s').dblclick(function(){alert('clicked bottom handle');})
});