title: Force text to stay on one line
body: <p>I have a situation where I have two sections of text that are horizontally adjacent (and contained within an <code>&lt;li&gt;</code>).  There is a title with normal justification and then a distance floated right.  I want these to stay on the same line no matter what.  Ideally, the 'title' section would utilize an <code>overflow:ellipse</code> and the 'distance' section would be displayed in place no matter how narrow the screen size.</p>
  
  <p>So,</p>
  
  <pre><code>|----------------------------------|
  |This title is too lo...  4.9 miles|
  |Short title              2.4 miles|
  |...                               |
  |----------------------------------|
  </code></pre>
  
  <p>I've tried several ways to accomplish this, including using <code>display: table</code>. I have been unable to achieve exactly this result. This is what I have at current:</p>
  
  <p>HTML:</p>
  
  <pre><code>   &lt;li &lt;?php echo $theme; ?&gt;&gt;
       &lt;a href='#' onclick="load_page('&lt;?php echo $listingurl;?&gt;')"&gt;
          &lt;span class='container'&gt;
            &lt;span class='name'&gt;
              &lt;?php echo $name;?&gt;
            &lt;/span&gt;
            &lt;span class='distance'&gt;
              &lt;?php echo $distance;?&gt;&amp;nbsp;mi&lt;/span&gt;
            &lt;/span&gt;
          &lt;/span&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  </code></pre>
  
  <p>less/css:</p>
  
  <pre><code>.container {
    display: table;
    &gt; span {
      display: table-cell;
    }
  }
  
  .name {
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .distance {
    float:right;
  }
  </code></pre>