JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper flipit">
<div id="first_div">first div</div>
<div id="second_div">second div</div>
</div>
I'm some following text.
<div>And more text.</div>

CSS

.flipit {
    position: relative;
}
.flipit #first_div {
    position: absolute;
    top: 100%;
    width: 100%;
}

#first_div {
    background: yellow;
    /* just to give it some arbitrary height; 
    the height can be dynamic */
    height: 200px;
    opacity: .6;
}

#second_div {
    background: cyan;
    /* just to give it some arbitrary height; 
    the height can be dynamic */
    height: 300px; 
}