title: Prevent div with dynamic content overlapping other divs
body: <p>See this <a href="https://jsfiddle.net/NathaliaZeed/m8o21nrb/" rel="nofollow">Fiddle</a></p>
  
  <p>This is the div structure</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="mainG mainGT"&gt;
          &lt;div class="rawV"&gt;
              &lt;div class="svs"&gt;&lt;/div&gt;
              &lt;div class="drgM"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="botttom"&gt;
      &lt;button type="button"&gt;Click Me!&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The height of the <code>.wrapper</code> is dynamic (I've used <code>.wrapper{height: 30px;}</code> as an example in the fiddle). As you can see <code>.wrapper</code> is overlapping <code>.botttom</code>. How do I prevent <code>.wrapper</code> overlapping <code>.botttom and have</code>.botttom<code>below</code>.wrapper` at all times?</p>
  
  <pre><code>|------------|
  |  .wrapper  |
  |------------|
  
  |------------|
  |  .bottom   |
  |------------|
  </code></pre>