title: CSS transition for movement after the above element display: none
body: <p>The suggested duplicated don't have a solution for this problem and don't hurry to close it. I'm a CSS expert.</p>
  <p>I have 2 elements having the same parent and when the first element disappears with <code>display: none</code>, the second element moves to the top, taking place of the first one. Is there a transition that can be added for the movement of the second element?</p>
  <p>See the sinppet below. Click on the red block to make it disappear and then click on the green one to show it back.</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.querySelector(".first").onclick = function(event) {
    this.style.display = "none";
  }
  
  document.querySelector(".second").onclick = function(event) { document.querySelector(".first").removeAttribute("style")
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.first {
      background: red;
      height : 250px;
  }
  
  .second {
    background : green;
    height : 250px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;div class="first"&gt;My element&lt;/div&gt;
    &lt;div class="second"&gt;Another element&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>