title: Make two CSS elements fill their container, side-by-side, with margin
body: <p>I want two elements to take up an exact percent of the parent's width, but I also need margins on them holding them apart. I have the following markup:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class='wrap'&gt;
    &lt;div class='element'&gt;HELLO&lt;/div&gt;&lt;div class='element'&gt;WORLD&lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.wrap {
    background:red;
    white-space:nowrap;
    width:300px;
  }
  .element {
    background:#009; color:#cef; text-align:center;
    display:inline-block;
    width:50%;
    margin:4px;
  }
  </code></pre>
  
  <p>As you can see in <a href="http://jsfiddle.net/NTE2Q/">http://jsfiddle.net/NTE2Q/</a> the result is that the children overflow the wrapper:</p>
  
  <p><img src="https://i.stack.imgur.com/m9RYK.png" alt="The &quot;world&quot; box extends past the end of the &quot;wrap&quot; container"></p>
  
  <p>How can I get them to fit within the space? Sadly, there is no <a href="https://developer.mozilla.org/en-US/docs/CSS/box-sizing"><code>box-sizing:margin-box</code></a> for this case.</p>