JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<div>Text</div>
<div class="container">
    <button class="resize">Drag Me</button>
</div>

CSS

.container {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
}  

.resize {
    right: 0px;
    height: 100%;
    width: 20px;
}

JavaScript

var start_x = 0;
var start_y = 0;
var current_width = 0;
var current_height = 0;
var x_delta = 0;
var y_delta = 0;
$(".resize").mousedown(function (down_event) {
    start_x = down_event.pageX;
    //start_y = down_event.pageY;
    $(window).mousemove(function (drag_event) {
        x_delta = drag_event.pageX - start_x;
        //y_delta = drag_event.pagey - start_y;
        current_width = $(".container").width();
        //current_height = $(".resize").height();
        $(".container").width(current_width + x_delta);
        //$(".resize").height(current_height + y_delta);
    });
});