title: stacking divs with flex
body: <p>I have the following code which vertically centers my content</p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="titleHide flex"&gt;
     &lt;h4&gt;...&lt;/h4&gt;
     &lt;h1&gt;...&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.titleHide {
    position: absolute;
    top: 0; left: 0;
    height: 100%; width: 100%;
    background-color: rgba(209,30,93,0.8);
  }
  
  .flex {
  display: flex;
  flex: 1;
  align-items: center;
  }
  </code></pre>
  
  <p>.flex is used by other divs on my site. However in this case it puts the h1 and h4 titles aligned beside each other, I want them the stack on top of each other.</p>