title: Inline-flex div gets pushed down when text is more than one line
body: <p>I'm working on an HTML/CSS chart that displays a series of financial groupings and visually shows how that money is distributed between companies. I've noticed that when the company names are long enough to take up multiple lines, its containing <code>div</code> drops down a bit.</p>
  
  <p>I have the following fiddle: <a href="https://jsfiddle.net/s1pxkj7q/1/" rel="nofollow noreferrer">https://jsfiddle.net/s1pxkj7q/1/</a></p>
  
  <p><strong>Why are those <code>div</code>s getting pushed down and how do I correct it?</strong></p>
  
  <p>Thanks!</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>body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: #ffffff;
  }
  
  #layers {
    width: 1000px;
    height: 400px;
    margin: 0 auto;
  }
  
  #layer-headings {
    width: 1000px;
    margin: 0 auto;
  }
  
  #layer-headings h3 {
    width: 50%;
    text-align: center;
    float: left;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 50px;
  }
  
  #consumed {
    width: 50%;
    height: 100%;
    outline: 1px solid #999;
    display: inline-block;
    margin: 0;
    vertical-align: top;
  }
  
  #available {
    width: 50%;
    height: 100%;
    display: inline-block;
    margin: 0;
  }
  
  #layers h3 {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    padding: 10px 0;
  }
  
  #layers .graph {
    height: 100%;
    width: 100%;
    border-bottom: 1px solid #999;
  }
  
  #layers h4 {
    font-size: 12px;
    text-align: center;
  }
  
  #layers .graph-box {
    margin-left: 5%;
    width: 75%;
    height: 100%;
    float: left;
    outline: 1px solid #555;
  }
  
  #layers .graph-box h4 {
    font-weight: bold;
    display: block;
    margin: 0 auto;
  }
  
  #layers .graph-label {
    margin-right: 5%;
    padding-left: 10px;
    width: 15%;
    height: 100%;
    vertical-align: top;
    display: flex;
    align-items: center;
  }
  
  #layers .graph-label h3 {
    margin: 0;
    padding: 0;
  }
  
  #layers .graph-col {
    height: 100%;
    display: inline-flex;
    align-items: center;
    outline: 1px solid #555;
  }
  
  #layers .graph-label.pdf {
    display: inline-block;
  }
  
  #layers .graph-col.pdf {
    display: inline-block;
  }
  
  .blue-grad {
    background: #3085dd;
    /* Old browsers */
    background: -moz-linear-gradient(left, #3085dd 0%, #60abf8 50%, #3085dd 100%);
    /* FF3.6-15 */
    background: -webkit-gradient(linear, left top, right top, from(#3085dd), color-stop(0.5, #60abf8), to(#3085dd));
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-linear-gradient(left, #3085dd 0%, #60abf8 50%, #3085dd 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #3085dd 0%, #60abf8 50%, #3085dd 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3085dd', endColorstr='#3085dd', GradientType=1);
    /* IE6-9 */
  }
  
  .red-grad {
    background: #e54b29;
    /* Old browsers */
    background: -moz-linear-gradient(left, #e54b29 0%, #fc8364 50%, #e54b29 100%);
    /* FF3.6-15 */
    background: -webkit-gradient(linear, left top, right top, from(#e54b29), color-stop(0.5, #fc8364), to(#e54b29));
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-linear-gradient(left, #e54b29 0%, #fc8364 50%, #e54b29 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #e54b29 0%, #fc8364 50%, #e54b29 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e54b29', endColorstr='#e54b29', GradientType=1);
    /* IE6-9 */
  }
  
  .yellow-grad {
    background: #e2dd31;
    /* Old browsers */
    background: -moz-linear-gradient(left, #e2dd31 0%, #fffa7a 50%, #e2dd31 100%);
    /* FF3.6-15 */
    background: -webkit-gradient(linear, left top, right top, from(#e2dd31), color-stop(0.5, #fffa7a), to(#e2dd31));
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-linear-gradient(left, #e2dd31 0%, #fffa7a 50%, #e2dd31 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #e2dd31 0%, #fffa7a 50%, #e2dd31 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e2dd31', endColorstr='#e2dd31', GradientType=1);
    /* IE6-9 */
  }
  
  .green-grad {
    background: #3bdb30;
    /* Old browsers */
    background: -moz-linear-gradient(left, #3bdb30 0%, #8cf984 50%, #3bdb30 100%);
    /* FF3.6-15 */
    background: -webkit-gradient(linear, left top, right top, from(#3bdb30), color-stop(0.5, #8cf984), to(#3bdb30));
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-linear-gradient(left, #3bdb30 0%, #8cf984 50%, #3bdb30 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #3bdb30 0%, #8cf984 50%, #3bdb30 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3bdb30', endColorstr='#3bdb30', GradientType=1);
    /* IE6-9 */
  }
  
  .purple-grad {
    background: #894bed;
    /* Old browsers */
    background: -moz-linear-gradient(left, #894bed 0%, #be99ff 50%, #894bed 100%);
    /* FF3.6-15 */
    background: -webkit-gradient(linear, left top, right top, from(#894bed), color-stop(0.5, #be99ff), to(#894bed));
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-linear-gradient(left, #894bed 0%, #be99ff 50%, #894bed 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #894bed 0%, #be99ff 50%, #894bed 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#894bed', endColorstr='#894bed', GradientType=1);
    /* IE6-9 */
  }
  
  .orange-grad {
    background: #d89531;
    /* Old browsers */
    background: -moz-linear-gradient(left, #d89531 0%, #fcce99 50%, #d89531 100%);
    /* FF3.6-15 */
    background: -webkit-gradient(linear, left top, right top, from(#d89531), color-stop(0.5, #fcce99), to(#d89531));
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-linear-gradient(left, #d89531 0%, #fcce99 50%, #d89531 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #d89531 0%, #fcce99 50%, #d89531 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d89531', endColorstr='#d89531', GradientType=1);
    /* IE6-9 */
  }
  
  .cyan-grad {
    background: #49e5e0;
    /* Old browsers */
    background: -moz-linear-gradient(left, #49e5e0 0%, #b8f9f5 50%, #49e5e0 100%);
    /* FF3.6-15 */
    background: -webkit-gradient(linear, left top, right top, from(#49e5e0), color-stop(0.5, #b8f9f5), to(#49e5e0));
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-linear-gradient(left, #49e5e0 0%, #b8f9f5 50%, #49e5e0 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #49e5e0 0%, #b8f9f5 50%, #49e5e0 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#49e5e0', endColorstr='#49e5e0', GradientType=1);
    /* IE6-9 */
  }
  
  .deepblue-grad {
    background: #3b52d3;
    /* Old browsers */
    background: -moz-linear-gradient(left, #3b52d3 0%, #7692f7 50%, #3b52d3 100%);
    /* FF3.6-15 */
    background: -webkit-gradient(linear, left top, right top, from(#3b52d3), color-stop(0.5, #7692f7), to(#3b52d3));
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-linear-gradient(left, #3b52d3 0%, #7692f7 50%, #3b52d3 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #3b52d3 0%, #7692f7 50%, #3b52d3 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3b52d3', endColorstr='#3b52d3', GradientType=1);
    /* IE6-9 */
  }
  
  .pink-grad {
    background: #db3dce;
    /* Old browsers */
    background: -moz-linear-gradient(left, #db3dce 0%, #fc94f5 50%, #db3dce 100%);
    /* FF3.6-15 */
    background: -webkit-gradient(linear, left top, right top, from(#db3dce), color-stop(0.5, #fc94f5), to(#db3dce));
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-linear-gradient(left, #db3dce 0%, #fc94f5 50%, #db3dce 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #db3dce 0%, #fc94f5 50%, #db3dce 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#db3dce', endColorstr='#db3dce', GradientType=1);
    /* IE6-9 */
  }
  
  #layers #consumed .graph {
    padding-right: 5%;
    position: relative;
  }
  
  #layers #consumed .graph-col {
    vertical-align: bottom;
  }
  
  #layers #consumed .graph-label {
    float: left;
    margin-left: 5%;
  }
  
  #layers #consumed .graph-row {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-right: 5%;
  }
  
  #layers #consumed .graph-box {
    margin-left: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="layers"&gt;
    &lt;div id="available"&gt;
      &lt;div class="graph"&gt;
        &lt;div class="graph-row" style="height:20%;"&gt;
          &lt;div class="graph-box red-grad" style="outline:1px solid #555;"&gt;
            &lt;div class="graph-col" style="width:40%;"&gt;
              &lt;h4&gt;40%&lt;br&gt;Short&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="graph-col" style="width:20%;"&gt;
              &lt;h4&gt;20%&lt;br&gt;This is a long one&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="graph-col" style="width:30%;"&gt;
              &lt;h4&gt;30%&lt;br&gt;Short&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="graph-col" style="width:10%;"&gt;
              &lt;h4&gt;10%&lt;br&gt;Short&lt;/h4&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="graph-label"&gt;
            &lt;h3&gt;$750,000&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="graph-row" style="height:27%;"&gt;
          &lt;div class="graph-box cyan-grad"&gt;
            &lt;div class="graph-col" style="width:20%;"&gt;
              &lt;h4&gt;20%&lt;br&gt;Short&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="graph-col" style="width:40%;"&gt;
              &lt;h4&gt;40%&lt;br&gt;Short&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="graph-col" style="width:15%;"&gt;
              &lt;h4&gt;15%&lt;br&gt;Short&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="graph-col" style="width:10%;"&gt;
              &lt;h4&gt;10%&lt;br&gt;Short&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="graph-col" style="width:15%;"&gt;
              &lt;h4&gt;15%&lt;br&gt;Short&lt;/h4&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="graph-label"&gt;
            &lt;h3&gt;$1,000,000&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="graph-row" style="height:27%;"&gt;
          &lt;div class="graph-box yellow-grad"&gt;
            &lt;div class="graph-col" style="width:25%;"&gt;
              &lt;h4&gt;25%&lt;br&gt;Short&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="graph-col" style="width:22%;"&gt;
              &lt;h4&gt;22%&lt;br&gt;This is a long one&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="graph-col" style="width:18%;"&gt;
              &lt;h4&gt;18%&lt;br&gt;Short&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="graph-col" style="width: 17%;"&gt;
              &lt;h4&gt;17%&lt;br&gt;Short&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="graph-col" style="width:18%;"&gt;
              &lt;h4&gt;18%&lt;br&gt;Short&lt;/h4&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="graph-label"&gt;
            &lt;h3&gt;$1,000,000&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="graph-row" style="height:14%;"&gt;
          &lt;div class="graph-box purple-grad"&gt;
            &lt;div class="graph-col" style="width:100%;"&gt;
              &lt;h4&gt;100%&lt;br&gt;Short&lt;/h4&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="graph-label"&gt;
            &lt;h3&gt;$500,000&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="graph-row" style="height:12%;"&gt;
          &lt;div class="graph-box orange-grad"&gt;
            &lt;div class="graph-col" style="width:100%;"&gt;
              &lt;h4&gt;100%&lt;br&gt;Short&lt;/h4&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="graph-label"&gt;
            &lt;h3&gt;$400,000&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>