JSFiddle - React, Tailwind, and code Playground

by bmh_ca

HTML

<div class='b'>
    <div class='m'>
        <div class='i'>
            When this disappears.
        </div>
    </div>
    <div class='p'>
        This should move up.
    </div>
    
    <br/>
    Click me!
</div>

CSS

.b {
    text-align: center;
    width: 100%;
    height: 200px;
    background-color: gray;
    /* transform-style: preserve3d; */
}

.i {
    padding: 12px;
    margin: 12px;
    line-height: 1.5em;
    position: relative;
    vertical-align: middle;
    background-color: #FAA;
}
.p {
    height: 45px;
    background-color: #AAf;
}
.m {
    background-color: #AFA;
    transition: 1s;
    transform-origin: center 0;
    max-height: 2500px;
}
.tran {
    max-height: 1px;
    transform: rotateX(90deg) skewX(-90deg) scale(0, 0);
}

JavaScript

$('.b').on('click', function () {
    $('.m').toggleClass('tran');
})