title: Width transition of text with CSS not working
body: <p>I have a div where I want to show the name of a person.</p>
  
  <p>I want to only show the person's first name in the normal state. When you hover, the last name should appear on the right of the first name, with its width expanding from 0 to normal width. All this text is aligned to the right.</p>
  
  <p>If I apply the transition to the last name span it doesn't even show it.<br>
  I also tried with max-width (as a guy does here: <a href="http://jsfiddle.net/qP5fW/87/" rel="nofollow">http://jsfiddle.net/qP5fW/87/</a> ) but it doesn't work.
  So I made a wrapper div, used width instead of max-width and now it works, only it doesn't show the transition at all.</p>
  
  <p>I suspect the problem is with the "auto" property but if anyone knows how to make the transition work, I would be very grateful.</p>
  
  <p>Here's my fiddle: <a href="https://jsfiddle.net/drywrsy6/" rel="nofollow">https://jsfiddle.net/drywrsy6/</a>  </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="name"&gt;
    &lt;span class="first"&gt;John&lt;/span&gt;
    &lt;div class="last-wrapper"&gt;
      &lt;span class="last"&gt;Doe&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.name {
    border: 1px solid lightgrey;
    margin: 10px auto 0px auto;
    padding: 5px;
    width: 300px;
    font-size: 2em;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
  }
  
  .first {
    font-style: italic;
  }
  
  .last-wrapper {
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    width: 0;
    transition: all 1s;
  }
  
  .last {
    color: red;
  }
  
  .name:hover .last-wrapper {
    width: auto;
  }
  </code></pre>