Animate an element's width from 0 to 100%, with it and it's wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery

Question

http://jsfiddle.net/nicktheandroid/tVHYg/

When hovering .wrapper, it's child element .contents should animate from 0px to it's natural width. Then when the mouse is removed from .wrapper, it should animate back down to 0px. The .wrapper element should only be as wide as it needs to be (allowing .contents to grow), so .wrapper should grow in width and shrink in width as .contents does. There should be no set width for .contents. I'm using CSS3, but it could be accomplished in jQuery, that would be fine.

The problem: See the JSfiddle

1. .wrapper is not only as wide as it needs to be.
2. when .contents grows, when it's almost at it's full width, it jumps down to the next line
3. When hovering off of .wrapper, .contents vanishes, when it should animate down to 0px

.wrapper {      display: inline-block;        height: 20px;      width: auto;          padding:10px;          background:#DDD;  }    .contents {      display:inline-block;          width:0%;          white-space:nowrap;      overflow:hidden;          background:#c3c;  }    .wrapper:hover .contents {      -webkit-transition: width 1s ease-in-out;      -moz-transition: width 1s ease-in-out;      -o-transition: width 1s ease-in-out;      transition: width 1s ease-in-out;        width:100%;  }

<div class="wrapper">      <span>+</span>      <div class="contents">These are the contents of this div</div>  </div>

Answer 1

I think I've got it.

.wrapper {      background:#DDD;      display:inline-block;      padding: 10px;      height: 20px;      width:auto;  }    .label {      display: inline-block;      width: 1em;  }    .contents, .contents .inner {      display:inline-block;  }    .contents {      white-space:nowrap;      margin-left: -1em;      padding-left: 1em;  }    .contents .inner {      background:#c3c;      width:0%;      overflow:hidden;      -webkit-transition: width 1s ease-in-out;      -moz-transition: width 1s ease-in-out;      -o-transition: width 1s ease-in-out;      transition: width 1s ease-in-out;  }        .wrapper:hover .contents .inner {           width:100%;  }

<div class="wrapper">      <span class="label">+</span><div class="contents">          <div class="inner">              These are the contents of this div          </div>      </div>  </div>

Animating to 100% causes it to wrap because the box is bigger than the available width (100% minus the + and the whitespace following it).

Instead, you can animate an inner element, whose 100% is the total width of .contents.

Answer 2

http://jsfiddle.net/tVHYg/5/

.wrapper {     background:#DDD;     padding:1%;     display:inline;     height:20px; }   span {     width: 1%; }  .contents {     background:#c3c;     overflow:hidden;     white-space:nowrap;     display:inline-block;     width:0%; }    .wrapper:hover .contents {     -webkit-transition: width 1s ease-in-out;     -moz-transition: width 1s ease-in-out;     -o-transition: width 1s ease-in-out;     transition: width 1s ease-in-out;      width:90%; }