title: Two inline-block, width 50% elements wrap to second line
body: <p>I would like to have two columns of 50% width space, and avoid floats.
  So i thought using <code>display:inline-block</code>.</p>
  
  <p>When the elements add to 99% width (eg 50%, 49%, <a href="http://jsfiddle.net/XCDsu/2/" rel="noreferrer">http://jsfiddle.net/XCDsu/2/</a> ) it works as expected.</p>
  
  <p>When using 100% width (eg 50%, 50%, <a href="http://jsfiddle.net/XCDsu/3/" rel="noreferrer">http://jsfiddle.net/XCDsu/3/</a> ) the second column breaks to the second line.</p>
  
  <p>Why is that?</p>