JSFiddle - React, Tailwind, and code Playground

HTML

<div id="c"></div>
<div id="nav"></div>

CSS

#c {
	position: fixed;
	top: 0;
	left: 0;
	background-color: green;
	width: 50px;
	height: 50px;
}

#c:hover {
	opacity: 0.8;
}

#nav {
	position: absolute;
	top: 100%;
    margin-top: -70px;
    margin-left: -70px; /* This compensates for the 20px gutter you initially had */
	left: 100%;
	background-color: red;
	width: 50px;
	height: 50px;
}

JavaScript

$('#nav').draggable();

$('#nav').data({
    'x': $("#nav").css('left'), 
    'y': $("#nav").css('top')
});

$("#c").click(function(){
    
    $('#nav').animate({
        'left': $("#nav").data('x'), 
        'top': $("#nav").data('y')
    }, 500);
});