JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<ol id="log"><li>LOG</li></ol>

<div id='anchor'>
    I am an anchor.
</div>

<button onclick="$('#log').append('<li>test</li>'); console.log(window.anchor.offsetTop);">Append</button> <br/>
<button onclick="$('#anchor').css('margin-top', '200px'); console.log(window.anchor.offsetTop);">Margin</button><br/>
<button onclick="$('#log').css('margin-top', '200px'); console.log(window.anchor.offsetTop);">Margin(Log)</button> <br/>

CSS

#anchor {
    background-color:red;
    width:100px;
    padding: 5px;
    margin: 5px;
    margin-top: 50px;
}

#element {
    background-color:green;
}

JavaScript

var anchor = $("#anchor");

var position = function() {
    $("#element").dialog({
        position: {
            my: "left+5 top",
            at: "right top",
            of: anchor
        }
    });
};

$("<div id='element'>I am a dialog</div>").dialog();
position();

var observeElement = function(element, config, observer) {
    observer.observe(element, config);
    var parent = element.parentNode;
    console.log(element);
    if (parent != null) {
        // Recursively watch its parent, to ensure that any changes are detected.
        observeElement(parent, config, observer);
    }
};

var onMutation = function(arMutationRecords) {
    console.log("Positioning dialog against anchor.");
    console.log(arMutationRecords);
    position();
}

if (window) {
    if (window.MutationObserver) {
        var observer = new MutationObserver(onMutation);
        observeElement(
            document.querySelector('#anchor'), 
            { 
                childList: true,
                attributes: true,
                characterData: true
            }, 
            observer);
    }
    else if (window.MutationEvent) {
        observeElementUsingMutationEvents(document.querySelector('#anchor'));
    }
}