JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<div id="" style="top: 68px; width:300px; height: 700px; left: 20px;background:red">
    <div class="ss-zone-clone" style="top: 68px; width:300px; height: 500px;"></div>
    <div class="ss-zone-object" style="top: 68px; width:300px; height: 500px;">
         <h2 style="top: 100px;">This is a better title</h2>
    </div>
</div>

CSS

.ss-zone-object {
    background-color: #ccc;
    position:absolute;
}
.ss-zone-object h2, .ss-zone-object p {
    position:relative;
}
.ss-zone-clone {
    position:absolute;
    background:transparent;
}

JavaScript

$(function () {

    $('.ss-zone-clone').resizable({
        grid: [1, 1],
        handles: 'n,s',
        containtment: 'parent',
        start: function (e, ui) {
            $(this).css({
                'background': 'rgba(255,255,255,0.5)',
                    'z-index': 1
            });
        },
        resize: function (e, ui) {


            var handle_axis = $(this).data('ui-resizable').axis;



        },
        stop: function (e, ui) {
            $(this).css({
                'background': 'rgba(255,255,255,0.5)',
                'z-index': 0
            });

            var h2_top = $('.ss-zone-object').find('h2').position().top;

            var orig_top = ui.originalPosition.top;
            var cur_top = ui.position.top;
            var new_top;

            new_top = (cur_top - orig_top);

            $('.ss-zone-object').css({
                'height': ui.size.height + 'px',
                'top': cur_top + 'px'
            });

            $('.ss-zone-object').find('h2').css('top', (h2_top - new_top));
            
        }
    });

})