Keep same width even if icon is hidden

Question

I have a <div> and when it is hovered I am displaying a child <div> that contains an icon.

Because the icon is higher than the text, the new icon changes the parent <div>'s height. It also changes the <div>'s width because it is inserted at the end.

My question: I would like the <div> to hide the icon (with display:none) but still have the same size as if the icon was there (without using static width/height). So when the user hovers over the <div>, the icon will be displayed but the <div> sizes will stay the same.

Is that possible?

.container {
  display: flex;
}

.row {
  border: 1px solid black;
  cursor: pointer;
  display: flex;
}

.row:hover .icon {
  display: flex;
}

.icon {
  display: none;
}

<div class="container">
  <div class="row">
    <div class="text">This is my div. When it is hovered, I dont want it to change width and height because of the icon.</div>
    <div class="icon"><img src="http://i.imgur.com/NpIpU3F.png"></div>
  </div>
</div>

View on CodePen

Answer 1

Use visibility: hidden instead of display: none

visibility: hidden preserves the space that elements occupy while making them invisibe. display: none removes elements from the flow of the page.

Answer 2

use visibility: hidden; and visibility: visible;

display: none

Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.

visibility: hidden

The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible. The element cannot receive focus (such as when navigating through tab indexes).

Also move display: flex; to .icon if you still need it (or remove it since flex will stretch the image if your text warps to 2nd line).

.container {
  display: flex;
}

.row {
  border: 1px solid black;
  cursor: pointer;
  display: flex;
}

.row:hover .icon {
  visibility: visible;
}

.icon {
  visibility: hidden;
  display:flex;
}

<div class="container">
  <div class="row">
    <div class="text">This is my div. When it is hovered, I dont want it to change width and height because of the icon.</div>
    <div class="icon"><img src="http://i.imgur.com/NpIpU3F.png"></div>
  </div>
</div>