JSFiddle - React, Tailwind, and code Playground

by meetamit

HTML

<div id="resizable">
    <div class="resizer"></div>
</div>

CSS

#resizable {
    position: relative;
    width: 300px;
    height: 200px;
    background: darkGreen;
}

#resizable .resizer {
    position: absolute;
    width: 10px;
    top: 0;
    bottom: 0;
    right: -5px;
    background: orange;
    opacity: .5;
    cursor: pointer;
}

JavaScript

var resizable = d3.select('#resizable');
var resizer = resizable.select('.resizer');

var dragResize = d3.behavior.drag()
    .on('drag', function() {
        // Determine resizer position relative to resizable (parent)
        x = d3.mouse(this.parentNode)[0];
        
        // Avoid negative or really small widths
        x = Math.max(50, x);
        
        resizable.style('width', x + 'px');
    })

resizer.call(dragResize);