JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="outer">
        <div class="middle">
            <div class="inner">
                 <h3>A-B</h3>

                <ul>
                    <li>A</li>
                    <li>B</li>
                </ul>
            </div>
            <div class="inner">
                 <h3>C-G</h3>

                <ul>
                    <li>C</li>
                    <li>D</li>
                    <li>E</li>
                    <li>F</li>
                    <li>G</li>
                </ul>
            </div>
            <div class="inner">
                 <h3>H</h3>

                <ul>
                    <li>H</li>
                </ul>
            </div>
        </div>
    </div>
</body>

CSS

html {
    height: 100%;
}
body {
    height: 100%;
}
#outer {
    height: 100%;
}
.middle {
    border: solid 2px black;
    height: 100%;
}
.inner {
    height: 0%;
    transition: height 5s 2s;
    -moz-transition: height 5s 2s;
    -webkit-transition: height 5s 2s;
    -o-transition: height 5s 2s;
}
#outer.loaded .inner {
    height: 100%;
}

JavaScript

window.onload = function () {
    document.getElementById("outer").setAttribute("class", "loaded");
}