Как выровнять по нижнему краю несколько встроенных блоков div в одном контейнере, не теряя при этом их потока?

Это для очень простой гистограммы, над которой я работаю,

Если я установлю контейнер относительным, а внутренние элементы div — абсолютным и нижним: 0 , то все они пересекаются. Они хорошо идут без абсолютного позиционирования, но тогда гистограмма перевернута.

Примечание:Я намеревался сохранить встроенный поток баров и не указывать явно горизонтальное положение.

Вот лучший пример проблемы.

http://jsfiddle.net/benstenson/NvvV6/1/

1) correct orientation but vertical alignment is top

    

    

    



2) wrong orientation, vertical alignment top

    
a
    
b
    
c


3) mixed orientation, alignment is crazy

    
a
    
b
    



4) correct orientation and correct alignment but

flow has been lost and horizontal position must be explicit

    
a
    
b
    



5) here we go!

    

        
a
        
b
        

    
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

css

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 > div {
    width:32%;
    display:inline-block;
    background-color:black;
    color:cyan;
}

#absolute { position:relative;}
#absolute > div {position:absolute;bottom:0px;opacity:.3;}

.a {height:50%;}
.b {height:60%}
.c {height:80%;}

td{width:33.333%;vertical-align:bottom;}
td > div{​background-color:black;​color:cyan;}​

Есть ли лучший способ сделать это, например, с помощью flexbox webkit или что-то в этом роде?