title: Hide div but keep the empty space
body: <p>I have the following div element:</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>.description {
    color: #b4afaf;
    font-size: 10px;
    font-weight: normal;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="description"&gt;Some text here&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Then I have a click function on an element to hide the above div:</p>
  
  <pre><code>$('#target').click(function(){
    $(".description").hide();
  });
  </code></pre>
  
  <p>When I hide the div, it collapses and stops taking up space. This messes up the layout of my page.</p>
  
  <p>Is there a way to hide the div, but still maintain the space it was taking before? I don't want to change the font color because it would be still selectable.</p>