JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="targetElement">
2 and 3 should be at the same position relative to 1
  <div class="positionDiv" id="position1">1</div>
  <div class="positionDiv" id="position2">2</div>
   <div class="positionDiv" id="position3">3</div>
</div>

CSS

#targetElement {
    height:300px;
    margin: 20px;
     border: dashed 1px #ee4455;
     background: #9cf;
  }
  .positionDiv {
    position: absolute;
    width: 75px;
    height: 75px;
    background: rgba(255,255,255,.3);
    border: dashed 1px #ee4455;
  }

JavaScript

$( "#position1" ).position({
  my: "center",
  at: "center",
  of: "#targetElement"
});
 
$( "#position2" ).position({
  my: "left+50% top+50%",
  at: "left+100% top",
  of: "#position1"
});
 
 $( "#position3" ).position({
  my: "center center",
  at: "right top",
  of: "#position1"
});