JSFiddle - React, Tailwind, and code Playground

HTML

<a id="my_button" href="#">Sort</a>
<ul id="my_ul">
    <li data-sort=3>3<iframe src="#3"></iframe></li>
    <li data-sort=2>2<iframe src="#2"></iframe></li>
    <li data-sort=4>4<iframe src="#4"></iframe></li>
    <li data-sort=1>1<iframe src="#1"></iframe></li>
    <li data-sort=5>5<iframe src="#5"></iframe></li>
</ul>

CSS

#my_ul li {
   position: absolute;
   display: block;
}

JavaScript

var iframeTop = 0;

$(function() {
    var ofsTop = $("#my_ul li:first-child").position().top;
    $("#my_ul li").each(function(index, value) {
        $(value).css({ top: ofsTop + 'px'});
        ofsTop += $(value).height();
    });
});

$("#my_button").click(function() {
    // sort li depending on data-sort
    var sorted = $("#my_ul li").sort(function(a, b) {
        return $(a).data("sort") - $(b).data("sort");
    });
    // re-position li's
    if (!iframeTop) iframeTop = $("#my_ul li:first-child").position().top;
    var ofsTop = iframeTop;
    $.each(sorted, function(index, value) {
        $(value).css({ top: ofsTop + 'px'});
        ofsTop += $(value).height();
    });
});