title: Align two inline-blocks left and right on same line
body: <p>How can I align two inline-blocks so that one is left and the other is right on the same line? Why is this so hard? Is there something like LaTeX's \hfill that can consume the space between them to achieve this?</p>
  
  <p><strong>I don't want to use floats</strong> because with inline-blocks I can line up the baselines. And when the window is too small for both of them, with inline-blocks I can just change the text-align to center and they will be centered one atop another. Relative(parent) + Absolute(element) positioning has the same problems as floats do.</p>
  
  <p>The HTML5:</p>
  
  <pre><code>&lt;header&gt;
      &lt;h1&gt;Title&lt;/h1&gt;
      &lt;nav&gt;
          &lt;a&gt;A Link&lt;/a&gt;
          &lt;a&gt;Another Link&lt;/a&gt;
          &lt;a&gt;A Third Link&lt;/a&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>The css:</p>
  
  <pre><code>header {
      //text-align: center; // will set in js when the nav overflows (i think)
  }
  
  h1 {
      display: inline-block;
      margin-top: 0.321em;
  }
  
  nav {
      display: inline-block;
      vertical-align: baseline;
  }
  </code></pre>
  
  <p>Thery're right next to each other, but I want the <code>nav</code> on the right.</p>
  
  <p><img src="https://i.stack.imgur.com/z88r1.png" alt="a diagram"></p>