CSS плавающие Div с разной высотой выровнены с пробелом между ними

Я использую плавающие DIVs для имитации двухколоночного макета (каждый div содержит текстовое поле для редактирования различных данных, таких как имя, хобби, ...). Так должно выглядеть вот так

1 2
3 4
5 6

Теперь мои div-блоки не всегда одинаковы, так как некоторые DIV имеют больше элементов, чем другие. Теперь мой макет выглядит так

   1 2
     2 
   3 4
   5 6

Вы также можете увидеть эффект наэтот пример если вы масштабируете его так, чтобы отображались только четыре или три столбца. Например. если в строке показаны 4 столбца, между Float 1 и Float 6 остается много места. Это плохо выглядит в моем интерфейсе. Я хочу, чтобы Float 6 следовал за Float 1 без пробелов между ними (кроме поля, которое я определяю)

Редактировать: мои DIVs в основном просто содержат float: left и width: 40%, так что два помещаются на экране

Вот скриншот, показывающий больше

Ответы на вопрос(3)

Ваш ответ на вопрос