JSFiddle - React, Tailwind, and code Playground

HTML

<div id='workbox'>
    <img src="http://tryimg.com/4/01.png" id="drag-resize-me" />
    <img src="http://tryimg.com/4/phone.png"id="phone"/>
    <div id="handle"></div>
</div>

CSS

#workbox{
    width: 401px;
    height: 511px;
    position: relative;
    border: 5px #000 solid;
    overflow: hidden;
}
#phone{
    position: absolute;
    top: 0;
    left: 0;
}
#drag-resize-me{
    position: absolute;
    top: 0;
    left: 0;
}
#handle{
    border: 1px #ccc solid;
}

JavaScript

$(function(){
    $('#handle').css('height',$('#drag-resize-me').height()).css('width',$('#drag-resize-me').width());
    $("#handle").draggable({
        drag: function(event,ui)
        {
            $('#drag-resize-me').css('left',ui.position.left).css('top',ui.position.top);
        }
    });
    $("#handle").resizable({
        alsoResize:'#drag-resize-me',
        handles: 'all',
        resize: function(event,ui)
        {
            $('#drag-resize-me').css('left',ui.position.left).css('top',ui.position.top);
        }
    });
});