JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr><th>8.0 (ok since 3.0.0-alpha1)</th><th>saas-6 (ok)</th></tr>
    <tr>
        <td>
            <p class="above">I should be above</p>
            <div class="scroll">
                <div class="below">I should be below</div>
                <div class="overflowing_content"></div>
            </div>
        </td>
        <td>
            <p class="above">I should be above</p>
            <div class="scroll">
                <div class="absolute_container">
                    <div class="below">I should be below</div>
                    <div class="overflowing_content"></div>
                </div>
            </div>
        </td>
    </tr>
</table>

CSS

.below, .absolute_container {
    width: 100%;
    position: absolute;
}
.scroll {
    position: relative;
    height: 300px;
    overflow: scroll;
}
.overflowing_content {
    height: 900px;
}
table { width: 100%; } td { width: 50%; }

JavaScript

// scroll to end
$(".scroll").each(function () {
    $(this).scrollTop($(this).prop("scrollHeight"));
});
// place .below 60 pixels below .above
$('td').each(function () {
    var aboveOffset = $('.above', this).offset();
    $('.below', this).offset({
        top: aboveOffset.top + 60,
        left: aboveOffset.left
    });
});