Ie will round the percentages up too much and the element becomes too big to fit and will drop down a line. Just shorten the wodth or offset it with a negative margin.
I couldn't get it displaying "correctly" in old gecko either. I tried -moz-inline-stack, but that jumbled all the paragraphs on top of each other
Older gecko works better with -moz-inline-box as I've never seen stack work properly. However older gecko does often like the internal content to be display:block inside of the -moz-inline-box element so it may be a step too far without adding extra mark up. I don't have an old version of gecko around at the moment to test.
The only other thing is, it would be nice each "cell" had a border, but I can't see any way that could be done.
I couldn't think of a way to do that otherwise I would have added it to the demo. There;s no way of knowing which is the tallest so you would end up with two lines in my example - which didn't matter for the background colour as its the same colour.
Actually I just though of a way of creating a border between rows
Make a top border only as the tops are always aligned.
display:block;/* safari bug */
border-top:1px solid #fff