JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="container">
  <div id="navi">
    <img src="http://www.mountainevolution.com/Cento%20Fonti/images/dscn7587.jpg" />
  </div>
  <div id="infoi">
  </div>
</div>

CSS

#container {
  width: 300px;
  height: 300px;
  position: relative;
}

#infoi {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: lightblue;
  border: solid 1px navy;
  width: 100px;
  height: 100px;
  opacity: 0.5;
}

#navi {
  padding: 0px;
  position: absolute; 
}

#navi img {
  display: block;  
  width: 50px;
  height: 50px;
}

JavaScript

$("#infoi").draggable({
  containment: "#navi"
});
$("#infoi").resizable({
  containment: "#navi"
});