title: CSS Footer align one line left and the other right with content higher on page
body: <p>I have a container div and inside this div is random content and a footer tag. The footer contains 2 spans with random text. I want to align the first span to the left and the second span to the right. </p>
  
  <p>The issue is that my footer is located at the bottom of the window. Because of this the width of the footer is only as wide as the text within it and not of the "containing" block (it is not really the container as apparently CSS considers the container to be the first block to provide a non default position).</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="randomContent"&gt;
          &lt;h1&gt;Content of an arbitrarily long length will go here&lt;/h1&gt;
  
          &lt;footer&gt;
              &lt;span class="alignLeft"&gt;Hello world&lt;/span&gt;
              &lt;span class="alignRight"&gt;other text&lt;/span&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#container {
      display: inline-block;
  
      border: 1px solid #000000;
  }
  
  footer {
      position: absolute;
      bottom: 0;
      height: 60px;           /* Height of the footer */
      border: 1px solid #000000;
  }
  
  .alignLeft {
      float: left;
  
  }
  
  .alignRight {
      float: right;
  
  }
  </code></pre>
  
  <p>My <a href="https://jsfiddle.net/JSparadoX/xrksofu7/" rel="nofollow">JS Fiddle</a> shows the issue. I want the boxes to be the same width, the "hello world" text to be left aligned and the "other text" to be right aligned in the footer. This should adjust as the "top" text size changes.</p>
  
  <p>Here is a second <a href="https://jsfiddle.net/JSparadoX/2owLg3zw/" rel="nofollow">JSFiddle</a> that shows what I'm looking for. I'm hoping to do this without the java script. The hope is to do this with CSS only.</p>
  
  <p>How can I make this work? </p>