JSFiddle - React, Tailwind, and code Playground

HTML

<div class="within">
  <div class="red"></div>
  <div class="blue"></div>    
</div>

CSS

.red {
    background: red;
    width: 200px;
    height: 50px;
}
.blue {
    background: blue;
    height: 100px;
    width: 100px;
    margin-left : 100.6px;
}
.within {
    background: #bbb;
    height: 250px;
    width : 250px;
}

JavaScript

$( window ).on( "load", function() {
    $.ajax({
        url: "http://code.jquery.com/ui/jquery-ui-git.js",
        dataType: "script",
        cache:true
    }).then( function(){
        
        $( ".red" ).position({
            my: "left top",
            at: "left bottom",
            of: ".blue",
            collision : "flip none",
            within: ".within",
            using: function( offset, feedback ) {
                $(this).css(offset).text(feedback.horizontal);
            }
        });
    });
});