title: css, Keep 2 elements on same line. Cut width of second element to stay on line
body: <p>I need two lines of text to be on the same line. I do not know the lengths of these texts. If the combined text length exceeds the parent's width, then the second line of text should be cut off. The text should not be pushed down. </p>
  
  <p>Plain float doesn't work because it pushes the second line down:</p>
  
  <pre><code>&lt;div style = "width:250px"&gt;
      &lt;div style = "max-width:250px;float:left"&gt;
          I have priority 1
      &lt;/div&gt;
      &lt;div style = "float:left"&gt;
          I get what is left over
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I made a jsfiddle to show <b>what it should look like:</b> </p>
  
  <p><a href="http://jsfiddle.net/hvhRC/2/" rel="nofollow">http://jsfiddle.net/hvhRC/2/</a>.  </p>
  
  <p>However, it needs to look like this without hardcoding the widths of the text lines.</p>