JSFiddle - React, Tailwind, and code Playground
HTML
<a class="show_then_offset">show then offset</a><br/>
<a class="show_then_offset">show then offset</a><br/>
<a class="show_then_offset">show then offset</a><br/>
<a class="show_then_offset">show then offset</a><br/>
<a class="offset_then_show">offset then show</a><br/>
<a class="offset_then_show">offset then show</a><br/>
<a class="offset_then_show">offset then show</a><br/>
<a class="offset_then_show">offset then show</a><br/>
<div id="block">block elemene
<br/><br/><br/>
<a class="hide">hide</a>
</div>
CSS
#block{
border:1px solid black;
background: white;
display:none;
width:80px
position:absolute;
}
JavaScript
$('.show_then_offset').click(function(){
var pos = $(this).offset();
pos.left = pos.left+50;
$('#block').show().offset(pos);
});
$('.offset_then_show').click(function(){
var pos = $(this).offset();
pos.left = pos.left+50;
$('#block').offset(pos).show();
})
$('.hide').click(function(){
$('#block').hide()
});