Как получить разную высоту HTML Divs для плавания вверх

У меня есть Серия динамически созданных Divs различной высоты в контейнере Div.

<div id="container">
  <div id='d1'>Varying text...</div>
  <div id='d2'>Varying text...</div>
  <div id='d3'>Varying text...</div>
  <div id='d4'>Varying text...</div>
  <div id='d5'>Varying text...</div>
  <div id='d6'>Varying text...</div>
  <div id='d7'>Varying text...</div>
</div>

Когда я «поплавкую: слева», как ожидалось, оставляя белое пространство между короткими делями и следующим ряд дев.

Как бы я получил девлины эффективно «плавать: вверх», обертывая иверное, а не горизонтально. Используя только CSS.

В идеале пункт 2 будет под пунктом 1, но любое улучшение поможет.

Итак, оно в конечном итоге выглядит так