title: How to push all lower elements down when expanding a div?
body: <p>I have a video iframe that expands when clicking a button. This is contained inside of a header for the page which has 100vh height (full screen). When the video expands, it pushes the rest of the content in the header up in order to have everything vertically centred within the header. Instead, I would like to increase the height of the header div beyond 100vh to 100vh plus the video height. However, the code I have so far isn't working.</p>
  
  <p><a href="https://gohrvst.com/kbd/index.html" rel="nofollow noreferrer">LINK TO PAGE</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
      $(".video" ).click(function() {    
          $(".header").height("+=315");
          document.getElementById("video__player").style.maxHeight = "50vw";
          
          document.getElementById("video-btn").style.display = "none";      
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.header {height: 100vh; width: 100vw;}
  
  .header__content {height: calc(100vh); width: 100%; display: flex; display: -webkit-flex;}
  .header__content--container {margin: auto; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column;}
  .video__container {text-align: center;}
  .video {color: gray; width: 100%; height: auto;}
  .play-btn {width: 20px; height: 20px; vertical-align: middle;}
  .video__player {overflow: hidden; width: 300px; max-height: 0px; transition: max-height 0.5s ease-in-out; -webkit-transition: max-height 0.5s ease-in-out; margin: auto;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header" id="header"&gt;
                  
                  &lt;div class="header__menu"&gt;
                      &lt;div class="header__menu--left"&gt;
                          &lt;div class="logo"&gt;
                              &lt;img class="logo__full img__full" src="assets/kbd-logo-english.svg"&gt;
                              &lt;img class="logo__mobile img__full" src="assets/kbd-logo-mobile.svg"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="header__menu--right"&gt;
                          &lt;div class="phone"&gt;
                              &lt;h9 class="strong" style="color: #5CBDE1;"&gt;1-855-636-0002&lt;/h9&gt;
                          &lt;/div&gt;
                          &lt;a class="quote menu__quote clickable" href="https://pt.atrium-uw.com/Quote?Id=81" style="margin: 0;"&gt;
                              &lt;h8 class="strong" style="margin: auto;"&gt;Get your quote&lt;/h6&gt;
                          &lt;/a&gt;
                          &lt;div class="language"&gt;
                              &lt;h9 class="clickable strong" style="color: #5CBDE1;"&gt;FR&lt;/h9&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  
                  &lt;div class="header__content"&gt;
                      &lt;div class="header__content--container animatedParent animateOnce"&gt;
                          &lt;h1&gt;Hi, we're KBD Insurance.&lt;/h1&gt;
                          &lt;br&gt;
                          &lt;h2 class="text__center"&gt;Life is chaotic. Insurance doesn't have to be.&lt;/h2&gt;
                          &lt;br&gt;&lt;br&gt;
                          &lt;div class="quote__wrapper header__quote--wrapper"&gt;
                              &lt;a class="quote menu__quote clickable animated fadeInDownShort slow" href="https://pt.atrium-uw.com/Quote?Id=81" style="margin: 0; height: 60px;"&gt;
                                  &lt;h8 class="strong" style="margin: auto;"&gt;Get your quote&lt;/h6&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                          &lt;br&gt;&lt;br&gt;
                          &lt;div class="video__container animated fadeInDownShort slow"&gt;
                              &lt;a class="h6 video clickable" id="video-btn"&gt;Watch the video &lt;img class="play-btn" src="assets/kbd-icon-play.svg"&gt;&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="video__player" id="video__player"&gt;
                              &lt;iframe src="https://www.youtube.com/embed/SIaFtAKnqBU" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>