JSFiddle - React, Tailwind, and code Playground

HTML

<div class="body">
    <div class="inner">Green is variable-height text which slides in on viewport hover</div>
    <div class="content">
    Blue is a viewport (&lt;body&gt;, visible part of a page), which content should be compressed upon green slide-in
    </div>
</div>

CSS

.body {
    background: #aaf;
    height: 300px;
    width: 300px;
    overflow: hidden;
}

.inner, .body:hover .inner {
    -webkit-transition:all linear 0.2s;
    transition:all linear 0.2s;
}

.inner {
    background: #afa;
    width: 300px;
    overflow: hidden;
}

.body:hover .inner {
    margin-top : 0 !important;
}

JavaScript

Array.prototype.forEach.call(document.getElementsByClassName('inner'), function (item) {
    item.style.marginTop = (item.clientHeight * -1) + 'px';
});