<div class="container">
  <div class="user-list">
    <h4>Users shift on hover</h4>
    <div class="user-item">Chris</div>
    <div class="user-item">Sarah</div>
    <div class="user-item">Harry</div>
    <div class="user-item">Rachel</div>
  </div>
  <div class="user-list">
    <h4>Problem Fixed!</h4>
    <div class="user-item fixed">Chris</div>
    <div class="user-item fixed">Sarah</div>
    <div class="user-item fixed">Harry</div>
    <div class="user-item fixed">Rachel</div>
  </div>
</div>

.container { display: flex; }
.user-list {
  flex: 1;
  margin: 1em;
}

.user-item {
  background-color: #cbe9f5;
  border-radius: 0.3em;
  padding: 0.4em;
}

.user-item.fixed {
  border: 2px solid transparent;
}

.user-item:hover {
  background-color: #efefd7;
  border: 2px solid #a7a784;
}

.user-item + .user-item {
  margin-top: 0.5em
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.