html - 2 column responsive masonry-like layout without javascript? -

i have number of divs of dynamic height place 2 columns display after other, ideally without javascript (and libraries such packery, masonry etc).

i've begun display: inline-block jsbin

i've tried following easy masonry layout flexbox no avail jsbin

i structure dom separate columns isn't ideal need collapse single column on mobile.

of course, using inline-block results in unwanted gap along lines of this:

edit: updated diagrams more clear desired result - left right columns no unwanted gaps

you should set float:left css divs.

<div style="float:left; display:inline-block;">    these divs displayed next each other. </div> 

i hope you.