Float divs with variable heights (arrange)

I'm having a simple problem concerning the arrangement of floating divs with variables heights.

The goal:

The result:

I just have div containers with css float: left; and no height defined. The first red circle indicated that my technique fails, although the second one proves me wrong by showing it IS working. Unfortunately, the last (not on screenshots) just starts floating after the height of the previous one (so there's a whole empty space on the left).

How should i solve this?

I don't think that this is doable a 100% with "just" css, but jquery-masonry should do the trick https://desandro.com/#masonry. Well, but i hope somebody proofs me wrong :)