JSFiddle - React, Tailwind, and code Playground

HTML

<div id='mainFlexbox'>
    <div id='videoPlaceholder'>
        <iframe id='catsVideo' src="//www.youtube.com/embed/tntOCGkgt98?showinfo=0" frameborder="0" allowfullscreen></iframe>
    </div>
    <div id='pnlText'>That's cool! This text is underneath the video in the HTML but above the video because of 'column-reverse' flex-direction.</div>
</div>

CSS

#mainFlexbox {
    border: 1px solid red;
    width: 50%;
    margin: 0 auto;
    padding: 1em;
    display: flex;
    flex-direction: column-reverse;
    height:500px;
}
#pnlText {
    border: 1px solid green;
    padding: .5em;
}
#videoPlaceholder {
    margin: 1em 0;
    border: 1px solid blue;
    /* intrinsic aspect ratio */
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}
#catsVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}