title: CSS: align two element, to the left and right in the same line WHITHOUT floats
body: <p>I am trying to align two inline elements, one to the left and one to the right. I'd like to accomplish this without using floats.</p>
  
  <p>In my case, I have a h1, with a span and a link. I'd like the span to align to the left and the link to align to the right.</p>
  
  <p><a href="http://jsfiddle.net/Lkfacta3/" rel="noreferrer">http://jsfiddle.net/Lkfacta3/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1&gt;span {
    text-align: left;
  }
  h1&gt;a {
    text-align: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;h1&gt;&lt;span&gt;Align me left&lt;/span&gt; &lt;a href=""&gt;align me right&lt;/a&gt;&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the desired result:</p>
  
  <p><img src="https://i.stack.imgur.com/i3J6g.png" alt="desired-result"></p>