title: Horizontally align three elements on center, left and right in the same row/line
body: <p>We have one container with three child elements:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="box-a"&gt;some content&lt;/div&gt;
    &lt;div class="box-b"&gt;other content&lt;/div&gt;
    &lt;div class="box-c"&gt;some other content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>We want to avoid using floats, and we'd like to align <code>box-a</code> on the <code>left</code> part of the page, <code>box-b</code> on the <code>center</code>, and <code>box-c</code> on the <code>right</code> part of the page.</p>
  
  <p>All three child elements could have some padding/margin and a background color. </p>
  
  <p>So far, we've used display: inline-block, but as the text-align should be set in the "container" element, we can only choose one method of alignment.</p>
  
  <p><a href="http://codepen.io/anon/pen/RNwLJK" rel="nofollow">http://codepen.io/anon/pen/RNwLJK</a> here's how it looks </p>