title: How to have smooth movements when inserting a new element?
body: <p>I insert a new div element in the middle of the others, and I want the others to move to their new position in a fluid way and not suddenly as is currently the case.</p>
  
  <p>Here is my code in action: <a href="https://codepen.io/BigEiffelTower/pen/vYBgqZq" rel="nofollow noreferrer">https://codepen.io/BigEiffelTower/pen/vYBgqZq</a></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="top"&gt;
    Top of the page
  &lt;/div&gt;
  
  &lt;div id="middle"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="bottom"&gt;
    &lt;form&gt; 
      &lt;input type="button" value="Add an element"&gt;
    &lt;/form&gt;
    End of the page
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#top, #middle, #bottom {
    font-size: 1.5em;
    border: 2px solid black;
    margin: 0.3em
    transition: all 2s ease;
  }
  </code></pre>
  
  <pre><code>var btn = document.querySelector('input');
  btn.addEventListener('click', updateBtn);
  
  function updateBtn() {
      $el = $("&lt;div&gt;", {
              id: 'middle-item',
              text: "New element"
          });
      $("#middle").append($el);
  }
  </code></pre>
  
  <p>How to make the #three element move smoothly when you click on the button?</p>