title: Animated CSS transition on a tabbed element
body: <p>I have a jQuery tabs element with different tab heights. The outer div has dynamic height, but I want it to resize smoothly when the inner elements change tabs.</p>
  
  <p>My current CSS is: </p>
  
  <pre><code>.parent{
    width:500px;
    background:green;
    padding:20px;
    transition:all 1s;
  
  }
  
  .tab1{
    width:300px;
    height:100px;
    background:red;
  }
  
  .tab2{
    width:300px;
    height:500px;
    background:blue;
    display:none;
  }
  
  .parent button{
    display:inline-block;
    vertical-align:middle;
  }
  </code></pre>
  
  <p>This fiddle shows the behaviour: <a href="https://jsfiddle.net/mh5b91gx/" rel="noreferrer">https://jsfiddle.net/mh5b91gx/</a></p>
  
  <p>I've tried using min-height and max-height but couldn't get it done. Can you guys help me out?</p>