При hover меняется высота блока. Как сделать, что-бы он не “отталкивал” нижние блоки?

.wrapper { 
  width: 400px; 
  border: 1px solid black; 
} 
 
ul { 
  display: flex; 
  flex-wrap: wrap; 
  list-style: none; 
} 
 
li { 
  position: relative; 
  margin: 5px; 
  min-width: 80px; 
  min-height: 1em; 
  border: 1px solid red; 
  background-color: #efefef; 
} 
 
li>div { 
  position: absolute; 
  left: 50%; 
  top: 1.2em; 
  transform: translateX(-50%); 
  margin: 0; 
  padding: 10px; 
  text-align: center; 
  border: 1px dotted blue; 
  background-color: #efefef; 
  opacity: 0; 
  transition: opacity .3s ease; 
} 
 
li:hover>div { 
  z-index: 1000; 
  opacity: 1; 
  transition: opacity .3s ease; 
}

<div class="wrapper"> 
  <ul> 
    <li>Первый 
      <div>1Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, libero! </div> 
      <p>Контент</p> 
    </li> 
    <li>Второй 
      <div>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, laborum! </div> 
      <p>Контент</p> 
    </li> 
    <li>Третий 
      <div>3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, pariatur. </div> 
      <p>Контент</p> 
    </li> 
    <li>Четвёртый 
      <div>4Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, nam. </div> 
      <p>Контент</p> 
    </li> 
    <li>Пятый 
      <div>5Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, voluptate?</div> 
      <p>Контент</p> 
    </li> 
  </ul> 
</div>