<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.