title: Expand div without pushing div below
body: <p>So, i have this code which expands the div height to show a hidden div with a transition.</p>
  
  <p>The problem is that the div below is pushed when expanding the main div. I know position absolute or even relative can do it, but I can't figure out where exactly i have to put the code. </p>
  
  <p>I've tried some things but none of them worked, i'll be grateful if anyone can help.</p>
  
  <p><a href="https://jsfiddle.net/oab68y6t/3/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {
    text-decoration: none;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
  }
  
  .produtos-destaque {
    width: 200px;
    height: 71px;
    background: rgb(220, 220, 220);
    transition: height .2s ease;
  }
  
  .produtos-destaque:hover {
    height: 131px;
  }
  
  .titulo-produto-home {
    padding: 20px 20px 0;
  }
  
  .produtos-destaque h3 {
    height: 31px;
    overflow: hidden;
    color: rgb(140, 140, 140);
    font-size: 13px;
  }
  
  .produtos-destaque:hover .btn-produto {
    opacity: 1;
  }
  
  .btn-produto {
    opacity: 0;
    padding: 20px 20px;
    transition: opacity .2s ease;
  }
  
  .btn-comprar {
    height: 40px;
    background: #fbbe3f;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    text-transform: uppercase;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" /&gt;
  &lt;div class="produtos-destaque"&gt;
    &lt;div class="titulo-produto-home"&gt;
      &lt;a href="#"&gt;
        &lt;h3&gt;Produto produto produto produto produto&lt;/h3&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="btn-produto"&gt;
      &lt;a href="#"&gt;
        &lt;div class="btn-comprar"&gt;Comprar&lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;I want this to not be pushed&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>