Overflow several inline vertical lists horizontally - html

Question

I have an information bar at the bottom of my site. It has several inline-block elements that are displayed horizontally. As you can see in the fiddle, when the information in the inline-block elements gets too large vertically, it overflows below the bottom edge of the information bar. I would like this stuff to overflow to the right, similar to a 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 is to transform this:
to this:
I have tried the css3 columns method: jsfiddle.
Unfortunately it is only designed to work with one column, I believe, because this happens:

Answer 1

I think I got it. There's one issue, however: when the windows is too small, the second information set is displayed below. But I think this isn't a big issue, since it's not that 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*/
}

Answer 2

Using the insight from this gist, we can organize the information in columns, but we must know the maximum column width beforehand:
.information-bar {
width:100%;
height: 100px;
background: #999;
position: absolute;
bottom: 0;
}
.information-bar .information {
display: inline-block;
vertical-align: top;
height: 95px;
}
p.info-element {
line-height: 1.2em;
}
p.info-element:nth-child(n+1):nth-child(-n+5) {
margin-left: 0em;
}
p.info-element:nth-child(6) {
margin-top: -6em;
}
p.info-element:nth-child(n+6):nth-child(-n+10) {
margin-left: 100px;
}
The nth-child(n+1):nth-child(-n+5) selector allows us to select a range of elements (as discussed in the gist). An interesting css hack!
jsfiddle