title: Align 6 divs content vertical
body: <p>How would i align all these 6 divs vertically in a 3x3 pattern so that the top and bottom divs content are aligned with each other so it looks good. i've tried some vertical-align: middle; with no sucess. </p>
  
  <p>It's a must to be 100% responsive and that the number also is centered and aligned so whatever number gets there is aligned.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.top-right-container {
   position: absolute;
   border: 1px solid white;
   height: 20%;
   width: 50%;
   right: 0;
   top: 0;
  }
  
  .stats-container {
   position: relative;
   float: left;
   border: 1px solid white;
   width: 75%;
   height: 80%;
  }
  
  .Agility,
  .Stamina,
  .Respect,
  .Intelligence,
  .Strength,
  .Cash {
   display: inline-block;
   color: black;
  }
  
  .Agility,
  .Intelligence {
   float: left;
   margin-left: 10%;
  }
  
  .Stamina,
  .Strength {
   margin: 0 auto;
  }
  
  .Respect,
  .Cash {
   margin-right: 10%;
   float: right;
  }
  
  .stats-container h2 {
   font-family: Marker-Felt;
   margin: 0;
   font-size: calc(0.7vh + 1.2vw);
  }
  
  .stats-container p {
   margin: 5%;
   text-align: center;
   font-size: calc(0.5vh + 0.8vw);
  }
  
  .top-stats,
  .bottom-stats {
   width: 100%;
   text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="top-right-container"&gt;
        &lt;div class="stats-container"&gt;
          &lt;div class="top-stats"&gt;
          &lt;div class="Agility"&gt;
            &lt;h2&gt;Agility&lt;/h2&gt;
            &lt;p&gt;10&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="Stamina"&gt;
            &lt;h2&gt;Stamina&lt;/h2&gt;
            &lt;p&gt;10&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="Respect"&gt;
            &lt;h2&gt;Respect&lt;/h2&gt;
            &lt;p&gt;10&lt;/p&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="bottom-stats"&gt;
          &lt;div class="Intelligence"&gt;
            &lt;h2&gt;Intelligence&lt;/h2&gt;
            &lt;p&gt;10&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="Strength"&gt;
            &lt;h2&gt;Strength&lt;/h2&gt;
            &lt;p&gt;10&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="Cash"&gt;
            &lt;h2&gt;Cash&lt;/h2&gt;
            &lt;p&gt;10&lt;/p&gt;
          &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>