title: How can I bottom align multiple inline-block divs in one container without losing their flow?
body: <p>This is for a very simple bar graph I'm working on,</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div style="display:inline-block;"&gt;
    &lt;/div&gt;
    &lt;div style="display:inline-block;"&gt;
    &lt;/div&gt;
    &lt;div style="display:inline-block;"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I set the container to relative and the inner divs to absolute &amp; bottom:0, then they all overlap. They flow nicely without the absolute positioning but then the bar graph is upside down.</p>
  
  <p><strong>Note:</strong> My intention was to retain the inline flow of the bars and not have to explicitly specify the horizontal positions.</p>
  
  <p>Here is a better example of the problem.</p>
  
  <p><a href="http://jsfiddle.net/benstenson/NvvV6/1/" rel="noreferrer">http://jsfiddle.net/benstenson/NvvV6/1/</a></p>
  
  <p><img src="https://i.stack.imgur.com/0A05e.jpg" alt=""></p>
  
  <pre><code>1) correct orientation but vertical alignment is top
  &lt;div id="no-content" class="container"&gt;
      &lt;div class="a"&gt;&lt;/div&gt;
      &lt;div class="b"&gt;&lt;/div&gt;
      &lt;div class="c"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  2) wrong orientation, vertical alignment top
  &lt;div id="has-content" class="container"&gt;
      &lt;div class="a"&gt;a&lt;/div&gt;
      &lt;div class="b"&gt;b&lt;/div&gt;
      &lt;div class="c"&gt;c&lt;/div&gt;
  &lt;/div&gt;
  
  3) mixed orientation, alignment is crazy
  &lt;div id="mixed" class="container"&gt;
      &lt;div class="a"&gt;a&lt;/div&gt;
      &lt;div class="b"&gt;b&lt;/div&gt;
      &lt;div class="c"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  4) correct orientation and correct alignment but&lt;br/&gt;
  flow has been lost and horizontal position must be explicit
  &lt;div id="absolute" class="container"&gt;
      &lt;div class="a"&gt;a&lt;/div&gt;
      &lt;div class="b"&gt;b&lt;/div&gt;
      &lt;div class="c"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  5) here we go!
  &lt;table class="container"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div class="a"&gt;a&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div class="b"&gt;b&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div class="c"&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>body {padding:1em;font-family:sans-serif;font-size:small;}
  .container {
      height:2.5em;width:50%;margin-bottom:1em;
      background-color:lightgray;
      font-size:larger;
      font-weight:bold;
      text-transform:Uppercase;
  }
  div.container &gt; div {
      width:32%;
      display:inline-block;
      background-color:black;
      color:cyan;
  }
  
  #absolute { position:relative;}
  #absolute &gt; div {position:absolute;bottom:0px;opacity:.3;}
  
  .a {height:50%;}
  .b {height:60%}
  .c {height:80%;}
  
  td{width:33.333%;vertical-align:bottom;}
  td &gt; div{​background-color:black;​color:cyan;}​
  </code></pre>
  
  <p>So is there a better way to do this, like with the webkit flexbox or something?</p>