JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<div>
    <div class="button">Resize Me</div>
    <article></article>
    <footer></footer>
</div>

CSS

.button {
    background-color:#333;
    border-color:#333;
    color:#fff;
    position:absolute;
    top:200px;
    left:50px;
    height:50px;
    width:150px;
    text-align:center;
    line-height:inherit;
    z-index:1;
}
article {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:300px;
    background-color:#ccc;
}
footer {
    position:absolute;
    top:300px;
    left:0;
    width:100%;
    height:100px;
    background-color:red;
}

JavaScript

$(function () {

    $('.button').resizable({
        create: function (e, ui) {
        },
        start: function (e, ui) {

        },
        stop: function (e, ui) {
            // alert("Stop");
            resizeCheck(ui);

        },
        resize: function (e, ui) {
            //var handle = $(this).data('ui-resizable').axis;
            //if (handle === 's') {
            resizeCheck(ui);
            //}
        }
    });
});

function resizeCheck(element) {
    
   var footer_current_top = parseInt($('footer').css('top')),
       body_current_height = parseInt($('article').css('height')),
       object_current_height = parseInt(element.size.height),
       elementBottom = (element.position.top + element.size.height);
    
    if (parseInt(elementBottom) > footer_current_top) {
        $("footer").css("top", elementBottom + "px");
        $("article").css("height", elementBottom + "px");
    }
}