JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="container-container-fluid">
		<div id="div1" class="item drag drop">div1</div>
    	<div id="div2" class="item drag drop">div2</div>
      <span id="test2"></span>
</div>

CSS

#container{
	position: relative;
	border: 2px solid gray;
	background-color: #f5af69;
	border: 1px solid #643506 ;
	height: 400px;
}

.item{
	position: absolute;	
	width: 50px;
	height: 30px;
	background-color: #ffef2d;
	border: 1px solid red;
	text-align: center;
	line-height: 25px;
     font-size: 24px;
}

#div1{
	left: 25%;
	top: 25%;
    color:black;

}

JavaScript

$(function(){
var percentLeft = '';
	var percentTop = '';
	
		$( ".drag" ).draggable({ 
            containment : '#container',
            tolerance: 'touch',
			stop:function(event, info){
				var position = $(this).position();
			 	percentLeft = position.left/$('#container').width() * 100;
			 	percentTop =  position.top/$('#container').height() *100;								
	   	 	}
        });		   
		   
		   
	   function wResize() {

             var winW = $('#container').width();
			 var d = $('#div1').position();
             
             $('#div1').css({color:'red',
			 			    position: 'absolute',
							left: percentLeft + '%',
							top: percentTop + '%'
							}); 
			$('#test2').html(percentLeft+ ' _____ '+ percentTop + 'winW : ' + winW);
			 
       
         
     }

     wResize();

    $(window).resize(function() {
        wResize();
    });
    
});