html - Overflow several inline vertical lists horizontally -

i have information bar @ bottom of site. has several inline-block elements displayed horizontally. can see in fiddle, when information in inline-block elements gets large vertically, overflows below bottom edge of information bar. stuff overflow right, similar newspaper column.

jsfiddle: link

<div class="information-bar">     <div class="information">         <div class="title">section title</div>         information <br />         information2 <br />         information3 <br />         information4 <br />         information5 <br />     </div>     <div class="information">         <div class="title">section title</div>         information <br />         information2 <br />         information3 <br />         information4 <br />         information5 <br />     </div> </div> 

the goal transform this:

to this:

i have tried css3 columns method: jsfiddle. unfortunately designed work 1 column, believe, because happens:

i think got it. there's 1 issue, however: when windows small, second information set displayed below. think isn't big issue, since it's not wide.

.information-bar { width:100%; height: 100px; background: #999; position: absolute; bottom: 0; }  .information-bar .information { display: block; height: 95px; -webkit-column-width:144px; -webkit-column-gap:16px; -moz-column-width:144px; -moz-column-gap:16px; column-width:144px; column-gap:16px; -moz-column-count:2; -webkit-column-count:2; column-count:2; } div.information { float:left; width: 304px; /*quick math: 144*2+16=304*/ }