Css układ bloków jeden pod drugim

Cześć,
mam problem z odpowiednim ułożeniem bloków o różnych wysokościach.

<div id="box">
   <div style="height: 20px; float: left;"></div>
   <div style="height: 50px; float: left;"></div>
   <div style="height: 40px; float: left;"></div>
   <div style="height: 80px; float: left;"></div>
   <div style="height: 50px; float: left;"></div>
</div>

Chciałbym aby te bloki wyświetlały się w takim układzie, jeden pod drugim niezależnie jaką mają wysokość:

https://imgur.com/RIE0qSc

Z góry dziękuję za pomoc.

Chciałbym aby te bloki wyświetlały się w takim układzie, jeden pod drugim niezależnie jaką mają wysokość

Wywal float:left

Musisz zmienić to na układ kolumnowy i ustalić jakieś zasady - na przykład: czy zawsze chcesz mieć dwa elementy czy tyle ile się zmieści w danym obszarze?

Jeśli chcesz tyle ile się zmieści to zapakuj te divy w container i użyj flex-direction: column; flex-wrap: wrap i nadaj jakąś maksymalną wysokość max-height.
https://jsbin.com/zatikicesu/1/edit?html,css,output

Jeśli chcesz zawsze dwa elementy to zrób zwyczajnie trzy kolumny (divy) i w środku po dwa divy ustawione w pionie.
Jeśli chcesz dynamicznie dodawać elementy no to niestety nie mam innego pomysłu niż zrobić trzy stałe kolumny i kodem decydować do której kolumny dodać nowy element

@obscurity: dziękuję za pomoc. A jak zmusić to rozwiązanie aby wyświetlało się w 3 kolumnach ? Ogólnie ustawienie szerokości elementów na 33.3333% nie pomaga.

https://jsfiddle.net/cay2kfxg/1/

@phanc: dziękuję za odpowiedź, jednak w tym przykładzie co wysłałeś każda kolumna ma taką samą wysokość, tzn. komórka w kolumnie.
A efekt powinien być taki: