JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<button>Toggle position (UI)</button>
<div id="attachment1">Hello!</div>
<table id="table1"><tbody><tr><td>Wide</td><td id="td1">Table</td></tr></tbody></table>
<br>
<button>Toggle position (no UI)</button>
<div id="attachment2">Hello!</div>
<table id="table2"><tbody><tr><td>Wide</td><td id="td2">Table</td></tr></tbody></table>

CSS

#attachment1, #attachment2 {width:50px;height:50px;background:yellow;position:absolute}
table {width:100%;background:#DBF3FF}
table.wide {width:200%}
td {text-align:center;line-height:40px;border:solid 1px rgba(0,0,0,0.1)}

JavaScript

$(function() {
    $("#attachment1").bind("reposition", function() {
        $(this).position({
            of: $("#td1"),
            my: "left top",
            at: "left top",
            offset: "0 5",
            collision: "fit"
        })
    });

    

    $("#attachment1").trigger("reposition");

    $("#attachment2").bind("reposition", function() {
        $(this).css({
            left: $("#td2").offset().left + "px",
            top: $("#td2").offset().top + 5 + "px"
        });
    });
        
    $("button:last").click(function() {
        $("#table2").toggleClass("wide");
        $("#attachment2").trigger("reposition");
    });
        
    $("#attachment2").trigger("reposition");

});