JSFiddle - React, Tailwind, and code Playground

by Aliqs Qid

HTML

<div class="cont" style="width:150px;height:150px;background-color:#eee;">
	<div class="t" style="width:50%;background-color:orange;height:inherit;float:left;"></div>
    <div class="test" style="width:50%;background-color:pink;height:inherit;float:left;"></div>
</div>

CSS

.cont {float:left;margin:5px;}

JavaScript

$(".test").resizable({containment: "parent",
        handles:"w,e",
        resize:function(e,ui){
            console.log(ui.position.top,ui.position.left);
            $(".t").css({position:"relative",left:ui.position.left+"px"});
        }
    });

console={create:function(){$("body").append("<div id='console-log' \n\nstyle='height:100px;overflow:auto;position:fixed;bottom:0;left:0;right:0;border:1px \n\nsolid grey;background:#fff;'></div>")},log:function(){var e="",t="<p class=\"console-line\" style='font-family: monospace; \n\nmargin: 2px;'></p>";i=0;for(var i=0;i<arguments.length;i++)e+=arguments[i],i<arguments.length-1&&(e+=", ");0==$("#console-log").length&&console.create(),$("#console-log").prepend($(t).html(e))}};