Padding-bottom/top in flexbox layout

Question

I have a flexbox layout containing two items. One of them uses padding-bottom :

Answer 1

The accepted answer is correct but I improved on the solution by using a pseudo-element instead of adding a new element in to the HTML.

Example: http://jsfiddle.net/4q5c4ept/

HTML:

  

    
  
  
That's cool! This text is underneath the video in the HTML but above the video because of 'column-reverse' flex-direction.    

CSS:

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