title: How can I make a fluid width header with text-overflow ellipsis without wrapping?
body: <p>I need a header and button on the same line, using ellipses if necessary.</p>
  
  <p>Here's a fiddle: <a href="http://jsfiddle.net/epyFT/1/">http://jsfiddle.net/epyFT/1/</a></p>
  
  <p>I'd like output to look like this:</p>
  
  <pre><code>_________________________________________________________
  |                                                       |
  | Header goes here [button]                             |
  |                                                       |
  ---------------------------------------------------------
  </code></pre>
  
  <p>Or</p>
  
  <pre><code>_________________________________________________________
  |                                                       |
  | Super, super, super, super long header... [button]    |
  |                                                       |
  ---------------------------------------------------------
  </code></pre>
  
  <p>Or with a smaller window:</p>
  
  <pre><code>____________________________
  |                          |
  | Header goes... [button]  |
  |                          |
  ----------------------------
  </code></pre>
  
  <p>The button should never float to the next line.  How can I do this?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;h2&gt;This is the header that should never wrap and elipse if it doesn't fit&lt;/h2&gt;
      &lt;button&gt;Button&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
      &lt;h2&gt;Header&lt;/h2&gt;
      &lt;button&gt;Button&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container {
      width:100%;
  }
  h2 {
      display:inline;
      min-width:200px;
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; word-wrap: break-word;
  }
  button {
      width:100px;
  }
  </code></pre>
  
  <hr>
  
  <p><strong>Bonus</strong></p>
  
  <p>Extra credit for getting a second (fixed width) button in there to pull right.</p>
  
  <pre><code>_________________________________________________________
  |                                                       |
  | Header goes here [button1]                  [button2] |
  |                                                       |
  |                                                       |
  | Super, super, super, super long... [button] [button2] |
  |                                                       |
  ---------------------------------------------------------
  </code></pre>