jquery's animate causing divs to 'jump' when text is inside
<p>I have been fighting jquery for about an hour, and I am hoping someone can help me here. The following example below has smooth animations. When you click either of the divs, the selected div will move to the left or right if the viewport is greater than 700px, or up and down when it is smaller than 700px. </p>

<p>The problem is when you click on the 'CODE' block. Sometimes, and it feels like this randomly happens, the code block will go from 50% of the window to 80%, and then smoothly transition to 100%. When I remove the <code>h1 elements</code> in the html file, the transition is smooth. </p>

<p>I've tested this locally with firefox, safari, chrome, and it all appears to be random. </p>

<p>I've tested this on jsfiddle with firefox, safari, and chrome and it appears that this problem goes away. </p>

<p>Can anyone spot what may be causing this? Why would I see this bug locally, but not when it's on jsfiddle? </p>

<p>Please note! The javascript code block that causes the divs to animate is the function <code>_modifyDiv</code>. Please remove and add the <code>h1 elements</code> in the div block to see if there is a difference on your side. I have no idea why my div blocks jump when I host these files locally vs through js fiddle...</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>/*jshint esversion: 6 */

var Welcome = (function () {
  var isSideBarActive = false;

  //So I don't have to write document.getElementById everytime.
  var id = function(element) {
    return document.getElementById(element);
  };

  //add multiple types of events to an element
  var addMultipleEvents = function(eventsArray, element, fn){
    eventsArray.forEach(function(e){
      id(element).addEventListener(e, fn, false);
    });
  }
  //which mode should we navigate to? This function creates a sidebar from the element
  var selectDiv = function(element){
    var selectedDiv;
    var notSelectedDiv;
    switch(element){
      case 'photography':
      selectedDiv = 'photography';
      notSelectedDiv = 'code';
      break;
      case 'code':
      selectedDiv = 'code';
      notSelectedDiv = 'photography';
      break;
    }

    return _modifyDiv(selectedDiv, notSelectedDiv);
  };

  var _modifyDiv = function (expand, contract){
    var $expand = $('#' + expand);
    var $contract = $('#' + contract);
    // id('aligner').style.justifyContent = 'space-between';

    if (!window.matchMedia('(max-width: 700px)').matches) {//is screen larger than 700px wide?
      $expand.animate({
        width: '100vw',
      },900);
      $contract.animate({
        width: '0vw',
        display: 'none'
      },900).delay(100).find('h1').css('display', 'none');
    } else { //screen is less than 700px wide
      $expand.animate({
        height: '100vh',
      },900);
      $contract.animate({
        height: '0vh',
        display: 'none'
      },900)
    }
  }

  return {//public methods
    selectDiv: selectDiv,
    addMultipleEvents: addMultipleEvents
    // modifyDiv: modifyDiv,
  };
})();


$(document).ready(function(){
  var myEvents = ['click', 'touchend'];
  Welcome.addMultipleEvents(myEvents, 'code', function(){Welcome.selectDiv('code')});
  Welcome.addMultipleEvents(myEvents, 'photography', function(){Welcome.selectDiv('photography')});

});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>@import "https://fonts.googleapis.com/css?family=Raleway:400,500";
#aligner {
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: 100%; }
  #aligner .align-spacer {
    width: 20px; }
  #aligner .align-item {
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(rgba(0, 163, 136, 0.45), rgba(0, 163, 136, 0.45)), url("http://placekitten.com/600/500");
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    height: 100vh; }
  #aligner .align-item:nth-child(1) {
    background: linear-gradient(rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)), url("http://placekitten.com/200/300");
    width: 100; }

@media (max-width: 700px) {
  #aligner {
    flex-direction: column; }
    #aligner .align-spacer {
      width: 20px; }
    #aligner .align-item {
      height: 50vh; } }
h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway' !important; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="aligner"&gt;
  &lt;div id = 'code' class = "align-item"&gt;
   &lt;h1&gt;Code&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id = 'photography' class = "align-item"&gt;
   &lt;h1&gt;Photography&lt;/h1&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>