title: Align content vertically with flexbox
body: <p>I am creating a tile where the image can either be 50% of the tile or 75% of the tile and content will fill the remaining area/ space left. My issue is I don't want to set a specific height for the image as it will lose it's image/aspect ratio. I have something like the following below:</p>
  
  <pre><code>const tile= () =&gt; (
    &lt;StyledWrapper&gt;
      &lt;StyledImageBlock&gt;
        //get Image here
      &lt;/StyledImageBlock&gt;
        &lt;StyledTextContent&gt;
          {getTitleOne()} //this is a span element
          {getTitleTwo()} //this is a span element
        &lt;/StyledTextContent&gt;}
    &lt;/StyledWrapper&gt;
  );
  </code></pre>
  
  <p>In my <code>StyledWrapper</code> I have the following:</p>
  
  <pre><code>  text-align: center;
  
    a {
      text-decoration: none;
    }
  </code></pre>
  
  <p>In my <code>StyledImageBlock</code> I have the following:</p>
  
  <pre><code>  width: 100%;
  </code></pre>
  
  <p>In my <code>StyledTextContent</code> I have the following:</p>
  
  <pre><code>align-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  </code></pre>
  
  <p>But items refuse to be vertically aligned, I set a height on the <code>StyledWrapper</code> to <code>height: 700px</code> just for demo and still refuses. Where am I going wrong here? Any suggestions on how to achieve what I have described.</p>
  
  <p>Some more information. I can achieve the desired result when setting a percentage height on the image and content but with this the image aspect ration changes to be worse/ stretches the image which I do not want. Ultimately this tile will be going into a flexbox grid.</p>