JSFiddle - React, Tailwind, and code Playground

HTML

<div id="initial"></div>
<div id="result"></div>
<div id="delta"></div>
<div id="content">
    <p>Possumus non labore ea senserit quis summis a illum. A ab illustriora. Noster excepteur illustriora in legam ut singulis do dolore sed nulla ubi cupidatat ita elit, commodo praesentibus de eiusmod.</p>
    <p>Incurreret qui fabulas quo et qui velit fore noster, ipsum possumus ad concursionibus
        <img src="http://placehold.it/350x150" />Lorem expetendis de cernantur. O summis eram a mentitum, arbitror ut probant, qui dolor quibusdam nescius, si dolore quorum enim cupidatat. Summis cupidatat se laborum.</p>
</div>

CSS

.resize_handler {
     border: 2px dashed black;
 }

JavaScript

$(document).ready(function (event) {

    
    var x_axis;
    var y_axis;
    var initial_x_axis;
    var initial_y_axis;
    var delta_x_axis;
    var delta_y_axis;
	var isDragging = false;	
    $('#content img').mouseup(function() {
        isDragging = false;        
    }).mousedown(function (event) {        
        isDragging = true;
        event.preventDefault();                
        initial_x_axis = event.pageX;
        initial_y_axis = event.pageY;        
        $("#initial").text("initial-x: " + initial_x_axis + ", initial-y: " + initial_y_axis);
        $(this).addClass("resize_handler");
    });

    $(document).mouseup(function () {        
        isDragging = false;
    })

    $(document).mousemove(function (event) {
         if(isDragging) {
            x_axis = event.pageX;
            y_axis = event.pageY;
            var newWidth = $('#content img')[0].width / (initial_x_axis / x_axis);
            $('#content img').css('width', newWidth + 'px');            
        }             
    });

});