title: webkit-transition height for a div with a dynamic changing height based on content?
body: <p>please see the following jsFiddle</p>
  
  <p><a href="http://jsfiddle.net/SgyEW/10/" rel="noreferrer">http://jsfiddle.net/SgyEW/10/</a></p>
  
  <p>You can click the various buttons which shows different length content which causes the box to grow/shrink.</p>
  
  <p>I want the height change to be animated so it is not so jumpy, I tried this by adding:</p>
  
  <pre><code>-webkit-transition: all 1s linear;
  </code></pre>
  
  <p>But that has no effect in this use case. Any ideas in terms of a solution that doesn't require JavaScript?</p>
  
  <p>Thanks</p>