title: How to force html elements into one line?
body: <p>I have some elements like:</p>
  
  <pre><code>    &lt;div&gt;
      &lt;div style="overflow: hidden; white-space: nowrap; text-overflow:ellipsis"&gt; 
  Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
      &lt;div style="float: right"&gt;Float text&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This will display something like:</p>
  
  <pre><code>Texttttttttttttttttttttttttttttttttttttttttttt...
                                         Float text
  </code></pre>
  
  <p>However I want it to be like:</p>
  
  <pre><code>Texttttttttttttttttttttttttttttttttttt...Float text
  </code></pre>
  
  <p>I try to use the absolute position method, but in this way, the ellipsis will not be shown.</p>
  
  <p>Is there any way I can do this?</p>
  
  <p>NOTICE:</p>
  
  <p>Not sure what's wrong, but many people suggest with the inline block or span way, both doesn't work. While putting the float text before 'Textttt' DOES work.</p>