title: Truncate text in floated box and show it entirely when hovering
body: <p>I have following html:</p>
  
  <pre><code>&lt;div class="box"&gt;
    &lt;div class="box-left"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="box-right"&gt;
      &lt;button&gt;Resource View&lt;/button&gt;
      &lt;button&gt;Employee View&lt;/button&gt;
      &lt;button&gt;Regular View&lt;/button&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <hr/>
  
  <p>Here's how it looks by default:</p>
  
  <p><img src="https://i.stack.imgur.com/EA5lg.png" alt="enter image description here"></p>
  
  <p>How it looks when hovering the text (we show full text length):</p>
  
  <p><img src="https://i.stack.imgur.com/FAlbq.png" alt="enter image description here"></p>
  
  <hr/>
  
  <p>Some more informations:</p>
  
  <ul>
  <li>I'm using text-ellipsis to truncate text (<a href="http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/" rel="nofollow noreferrer">see here</a>)</li>
  <li>When text is hovered, we're using <code>:hover</code> selector to set <code>position:absolute</code> to text paragraph</li>
  <li>We don't know in advance the width of <code>.box-right</code>, neither the width of <code>.box-left</code></li>
  <li><code>.box</code> width equals window's width (so it's variable)</li>
  </ul>
  
  <hr/>
  
  <p>Actually, I have this example working with CSS and Javascript, the javascript consists of setting <code>.box-left p</code>'s element width on page load, using:</p>
  
  <pre><code>$('.box-left p').css('width', $('.box').innerWidth() - $('.box-right').outerWidth())
  </code></pre>
  
  <hr/>
  
  <p>Question:</p>
  
  <ul>
  <li>I'm wondering if there's a CSS only solution? I've tried with <code>display: table-cell</code> without success.</li>
  </ul>
  
  <p>What I want to do:</p>
  
  <ul>
  <li>Truncate text of <code>.box-left</code> to have buttons and text on one line</li>
  <li>When hovering text, show it's full length</li>
  </ul>