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>
    Blue is a viewport (&lt;body&gt;, visible part of a page), which content should be compressed upon green slide-in
</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;
    /* here is the troublesome part: in real case i don't know real height of this element and can't assume it is equal to 2.5em (which was iteratively guessed), i need to specify something like "100% height of this div" */
    margin-top:-2.5em;
}

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

JavaScript

111