title: Equal height images and text above using flexbox
body: <p>I'm having some trouble with aligning certain elements using Flexbox. You can see the <a href="http://fiddle.jshell.net/y9bM4/496/" rel="nofollow">JSfiddle here</a>,</p>
  
  <p>I used flex because the image from the Steve Jobs movie is higher then the image of Legend, so when I place the images in the divs there would be a gap.I want them to be the same size. So I used Flex to create divs with the same size and then use the image as the background to fill it up. Which works fine. </p>
  
  <p>But the problem is that I want to show the release date above the images and for some reason Flex decides to put the span element with the date and the image element with the image next to each other.</p>
  
  <p>If I remove the <code>display: flex</code> from the <code>.movie_container</code> it places the release date above the image but then the images have different sizes.</p>
  
  <p>So I'm wondering if there's a way to keep the Flex aspect but also have the span element above the image instead of next to it.</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>div#got-gridbox {
    padding: 20px;
    background: #F1F1F1;
    display: flex;
    flex-flow: row wrap
  }
  .movie_container {
    width: 150px;
    background: #ddd;
    padding: 10px;
    display: flex
  }
  .movie_container img {
    width: 100%;
    opacity: 0;
  }
  span {} .poster_1 {
    background: url('http://image.tmdb.org/t/p/w500//7SUaf2UgoY0ZRGbQtRlfDkLDBCb.jpg') no-repeat center center;
    background-size: cover;
    background-color: green;
    display: inline-block;
  }
  .poster_2 {
    background: url('http://image.tmdb.org/t/p/w500//3tD0r8F6b7vygxZt3iRvf2ELwAO.jpg') no-repeat center center;
    background-size: cover;
    background-color: green;
    display: inline-block;
  }
  </code></pre>