title: HTML DIV should be hidden but the position not change the existing div
body: <p>I want to hide 1, 3 and 2 &amp; 4 not change their position.</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-css lang-css prettyprint-override"><code>div{
    width: 10%;
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="background-color: blue"&gt;&lt;p&gt;1&lt;/p&gt;&lt;/div&gt;
  &lt;div style="background-color: yellow"&gt;&lt;p&gt;2&lt;/p&gt;&lt;/div&gt;
  &lt;div style="background-color: red"&gt;&lt;p&gt;3&lt;/p&gt;&lt;/div&gt;
  &lt;div style="background-color: green"&gt;&lt;p&gt;4&lt;/p&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/zZlWs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zZlWs.png" alt="enter image description here" /></a></p>