title: Css transition not applying in child elements
body: <p>I'm currently facing the following problem.
  I have a <code>&lt;section&gt;</code> element that has some <code>&lt;div&gt;</code> as children.
  The height of the <code>&lt;section&gt;</code> is set as a percentage of the parent div, and the <code>&lt;div&gt;</code>'s height is also set as a percentage of the <code>&lt;section&gt;</code>.</p>
  
  <p>I'm using Jquery to add a class to the <code>&lt;section&gt;</code> in order to transition between two heights. The problem is that the children aren't updating their height.</p>
  
  <p>I don't want to refresh the css using ye olde <code>display: none</code> and <code>removeAttr("style")</code> trick since I want the transition to be applied to the children too.</p>
  
  <p>I've made a couple of sketches to help understand the problem.</p>
  
  <p>Initial state
  <a href="https://i.stack.imgur.com/x4kvj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x4kvj.png" alt="Initial state"></a>
  After the transition
  <a href="https://i.stack.imgur.com/8BDl9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8BDl9.png" alt="After the transition"></a></p>
  
  <ul>
  <li>EDIT</li>
  </ul>
  
  <p>The <code>&lt;section&gt;</code> tag has the following classes at initial state:
  <code>fullWidth halfHeight expandableTransition</code></p>
  
  <pre><code>.fullWidth {
    width: 100%;
  }
  
  .halfHeight {
    height: 48%;
  }
  
  .expandableTransition {
    -webkit-transition: height 1s; /* Safari */
    transition: height 1s;
  }
  </code></pre>
  
  <p>The CSS for the children <code>&lt;div&gt;</code> is:</p>
  
  <pre><code>.myDiv {
    border: 1px solid;
    height: 82%;
    width: 300px;
    display: inline-block;
    vertical-align: middle;
  }
  </code></pre>
  
  <p>The class added by Jquery in order to transition to the new height is as simple as:</p>
  
  <pre><code>.expandedSection {
    height: 96%;
  }
  </code></pre>
  
  <p>The Jquery code that adds the class is the following:</p>
  
  <pre><code>function expandSection() {
      $("#prioritySection").toggleClass("expandedSection");
  }
  </code></pre>