title: Keep same width even if icon is hidden
body: <p>I have a <code>&lt;div&gt;</code> and when it is hovered I am displaying a child <code>&lt;div&gt;</code> that contains an icon.</p>
  
  <p>Because the icon is higher than the text, the new icon changes the parent <code>&lt;div&gt;</code>'s height. It also changes the <code>&lt;div&gt;</code>'s width because it is inserted at the end.</p>
  
  <p>My question: I would like the <code>&lt;div&gt;</code> to hide the icon (with <code>display:none</code>) but still have the same size as if the icon was there (without using static width/height). So when the user hovers over the <code>&lt;div&gt;</code>, the icon will be displayed but the <code>&lt;div&gt;</code> sizes will stay the same.</p>
  
  <p>Is that possible?</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>.container {
    display: flex;
  }
  
  .row {
    border: 1px solid black;
    cursor: pointer;
    display: flex;
  }
  
  .row:hover .icon {
    display: flex;
  }
  
  .icon {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="text"&gt;This is my div. When it is hovered, I dont want it to change width and height because of the icon.&lt;/div&gt;
      &lt;div class="icon"&gt;&lt;img src="http://i.imgur.com/NpIpU3F.png"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>View on <a href="https://codepen.io/dsomekh/pen/BdqJmB" rel="nofollow noreferrer">CodePen</a></p>