title: Alignment of content vertically in adjacent flexbox containers
body: <p>I have multiple items say cards. These cards need to stack horizontally and height needs to be the same. This is happening for me. </p>
  
  <p>Each card has an image, text and a button. Image and text for each card should take what ever is the max height in any card, so that these align properly. This is not happening for me. </p>
  
  <p>If the image and text align properly then the button will always be aligned in each card at the bottom. </p>
  
  <p>I have been following <a href="http://www.lottejackson.com/learning/an-equal-height-grid-using-flexbox" rel="nofollow noreferrer">this tutorial</a> but I have multiple cards, putting three here only. Also the third card image height is being set via CSS. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.partner-cards * {
    box-sizing: border-box;
  }
  
  .partner-cards {
    display: flex;
    flex-wrap: wrap;
  }
  
  .partner-card {
    display: flex;
    flex: 1 0 20%;
    border-radius: 0;
    text-align: center;
    border: 3px solid blue;
    padding: 5px;/*3rem;*/
    margin-bottom: 3rem;
    max-width: 20%;
    margin: 5px;
  }
  
  .partner-card-content {
    display: flex;
    flex-direction: column;
  }
  /*
  .card-content .image-container img {
    
    margin: 0;
    padding: 0;
  }
  */
  .partner-card-content .partner-image-container {
    border: 1px solid green;
    padding: 0;
    margin: 0;
    min-height: 11rem;
                  display: flex;
                  vertical-align: middle;
                  align-items: center;
                  justify-content: center;
                  max-width: 100%;
  }
  
  .partner-card-content p /*, .card-content .image-container*/
  {
    flex: 1 0 auto;
    border: 1px solid red;
  }
  
  .partner-card-content img.third-image {
    height: 5.5rem !important;
  }
  /*
  p {
    font-size: 16px;
  line-height: 26px;
  font-family: Averta-Regular,Arial,Helvetica,sans-serif;
  margin-bottom: 2.5rem;
  margin-top: 0;
  }*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="partner-cards"&gt;
  
    &lt;div class="partner-card"&gt;
      &lt;div class="partner-card-content"&gt;
        &lt;div class="partner-image-container"&gt;
          &lt;img src="https://via.placeholder.com/100x40" alt=""&gt;
        &lt;/div&gt;
        &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.&lt;/p&gt;
        &lt;a class="primary-button" href="#"&gt;View XXX XXX XXX Offer&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="partner-card"&gt;
      &lt;div class="partner-card-content"&gt;
        &lt;div class="partner-image-container"&gt;
          &lt;img src="https://via.placeholder.com/50x150" alt=""&gt;
        &lt;/div&gt;
        &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
          the industry's standard dummy text ever since the 1500s.&lt;/p&gt;
        &lt;a class="primary-button" href="#"&gt;View YYY Offer&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="partner-card"&gt;
      &lt;div class="partner-card-content"&gt;
        &lt;div class="partner-image-container"&gt;
          &lt;img src="https://via.placeholder.com/120x100" class="third-image" alt=""&gt;
        &lt;/div&gt;
        &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
          the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. &lt;/p&gt;
        &lt;a class="primary-button" href="#"&gt;View ZZZ Offer&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class="partner-card"&gt;
      &lt;div class="partner-card-content"&gt;
        &lt;div class="partner-image-container"&gt;
          &lt;img src="https://via.placeholder.com/50x100" alt=""&gt;
        &lt;/div&gt;
        &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
          the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;
        &lt;a class="primary-button" href="#"&gt;View ABC Offer&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How it should show:</p>
  
  <p><a href="https://i.stack.imgur.com/lAulQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lAulQ.png" alt="enter image description here"></a></p>
  
  <p>The tutorial image on code pen, properly aligns the h2, text and link:</p>
  
  <p><a href="https://i.stack.imgur.com/Jf8Um.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jf8Um.png" alt="enter image description here"></a></p>