Inline-flex div gets pushed down when text is more than one line

Question

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 div drops down a bit.

I have the following fiddle: https://jsfiddle.net/s1pxkj7q/1/

Why are those divs getting pushed down and how do I correct it?

Thanks!

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;
}


  
    
      
        
          
            40%
Short
          
          
            20%
This is a long one
          
          
            30%
Short
          
          
            10%
Short
          
        
        
          $750,000
        
      
      
        
          
            20%
Short
          
          
            40%
Short
          
          
            15%
Short
          
          
            10%
Short
          
          
            15%
Short
          
        
        
          $1,000,000
        
      
      
        
          
            25%
Short
          
          
            22%
This is a long one
          
          
            18%
Short
          
          
            17%
Short
          
          
            18%
Short
          
        
        
          $1,000,000
        
      
      
        
          
            100%
Short
          
        
        
          $500,000
        
      
      
        
          
            100%
Short
          
        
        
          $400,000

Inline-flex div gets pushed down when text is more than one line

1 Answers