JSFiddle - React, Tailwind, and code Playground

HTML

<p class="popUp one"><a>popUp one here</a></p>
<p class="popUp two"><a>popUp two here</a></p>

<div class="modal one">PopUp one should be here</div>
<div class="modal two">PopUp two should be here</div>

CSS

p{color:black;}
p a{cursor:pointer;}
.modal{position:absolute;display:none;}

JavaScript

var p = $(".popUp");
var position = p.position();
var tagLength = $("p a").width();
$( ".modal" ).css({left: (position.left + tagLength + 10) + "px", top: position.top + "px"});

$( ".popUp").hover(
   
        function() {
          $( ".modal" ).stop().fadeIn();
        }, function() {
          $( ".modal" ).stop().fadeOut();
        }
   
);