Multicolumn Layout with equal heights

HTML

<div class="test">

  <div>
  123
  </div>


  <div>
  456
  </div>
  <div>
  789
  </div>
  <div>
  ABC
  </div>
  <div>
  DEF
  </div>
  <div>
  IJK
  </div>
  <div>
  LMN
  </div>
  <div>
  OPQ
  </div>
  <div>
  RST
  </div>
  <div>
  UVW
  </div>
  <div>
  XYZ
  </div>


</div>

CSS

.test {
	
	/* auto or units except percentage */
 -webkit-columns: 2 auto;
 -moz-columns: 2 auto;
 columns: 2 auto;
					
 -webkit-column-rule: 1px solid red;
 -moz-column-rule: 1px solid red;
 column-rule: 1px solid red;
	
-webkit-column-fill: balance;
 -moz-column-fill: balance;
 column-fill: balance;
	
}

.test > div {
  background:red;margin:1rem; padding:1rem; display:float
  
}