JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div class="box">
    <div id="inner-box">
        <span id="content">
            dfbdfbbdfbdfb
        </span>
        <div id="NEW">
            dfbdfbbdfbdfb
        </div>
    </div>
  
    </div>
</div>

CSS

.box{
 background: red;
 border: black;
 height: 200px;
 width: 200px; 
 padding: 10px;
 margin-top: 20px;
 margin-left: 10px;   
}
#inner-box{
 background: grey;
 height: 100px;
 width: 100px;
 max-height:150px;
 display: block;
}
.ui-resizable-s {
    border-top: 1px solid #DCDCDC;
    cursor: row-resize;
    height: 4px;
    left: 0;
    width: 100%;
}
.ui-resizable-handle {
    display: block;
    font-size: 0.1px;
    z-index: 99999;
    background: none repeat scroll 0 0 #F0F0F0;
}
#NEW{
 height: 100%;
 max-height: 100px;    
}

JavaScript

$('#inner-box').resizable();