JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
     <div class="box"></div>
     <img src="http://www.ariva.de/cat_a224226"  />
</div>

<div class="info">
</div>

CSS

.container{
    position:relative;
    margin:0;
    background:gold;
    line-height:0;
    text-align:center;
}

.box{
    width:145px;
    height:145px;
    position:absolute !important;
    top:30%;
    left:5%;
    background:deepPink;
}

JavaScript

$('.box')
.resizable({containment: 'parent',handles: "se",stop:resizeStop})
.draggable({containment: 'parent', stop:dragStop})

function resizeStop(event, ui){
    convert_to_percentage($(this));
}

function dragStop(event, ui){
    convert_to_percentage($(this));
}

function convert_to_percentage(el){
    var parent = el.parent();
    el.css({
        left:parseInt(el.css('left'))/parent.width()*100+"%",
        top: parseInt(el.css('top'))/parent.height()*100+"%",
        width: el.width()/parent.width()*100+"%",
        height: el.height()/parent.height()*100+"%"
    });
}

/* Debug Info */
var myVar=setInterval(function(){
    $('.info').html('LEFT : '+$('.box')[0].style.left + '<br />TOP:  '+$('.box')[0].style.top + '<br />WIDTH: '+$('.box')[0].style.width + '<br />HEIGHT: '+$('.box')[0].style.height);
},10);