Как в HTML+CSS разбить на две части div-ы?

Question

[eldar_web]

Вот в этом примере codepen.io/anon/pen/ZbmpVj есть основной блок.
Он имеет высоту: 150px
И есть его дочерние блоки, но вот незнаю как делать, чтобы те блоки, которые выезжают перешли на правую часть. То есть, по порядку 1 - 2 - 3, и остальные на правый блок, а не 1 - 2, 3 - 4. Как это сделать?

Comments

[Arman]

обязательно чтоб дочерние были div'ы?

[eldar_web]

Да, так как контент будет динамическим.

Answer 1

[Alex]

www.w3schools.com/cSS/css3_multiple_columns.asp

.block {
  height: 150px;
  background-color: orange;
    -webkit-columns: 2 auto; 
    -moz-columns: 2 auto;
    columns: 2 auto;
}

.item {
  margin-top: 0px;
  background-color: green;
  height: 40px;
  width:100%;
  display:inline-block;
}