How to split a div into two parts in HTML+CSS?

Question

css

Here in this example codepen.io/anon/pen/ZbmpVj there is a main block.
It has a height: 150px
And there are its child blocks, but I don’t know how to make those blocks that move out to the right side. That is, in order 1 - 2 - 3, and the rest on the right block, not 1 - 2, 3 - 4. How to do this?

Answer 1

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;
}