Content being pushed down - css

Question

We have a group of avatars held in a container, I want to add a plus symbol at the end of the group so that the user can select to add more people,
When I add it the new component is forced down. I can;t see how to stop this happening.
working code pen
https://codepen.io/jachno/pen/zYOLbyd
.avatar {
color: #fff;
background-color: #adb5bd;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
border-radius: 50%;
height: 48px;
width: 48px;
}
.avatar img {
width: 100%;
border-radius: 50%;
}
.avatar span {
width: 100%;
border-radius: 50%;
}
.avatar+.avatar-content {
display: inline-block;
margin-left: .75rem;
}
.avatar-lg {
width: 58px;
height: 58px;
font-size: 0.875rem;
}
.avatar-sm {
width: 36px;
height: 36px;
font-size: 0.875rem;
}
.avatar-group .avatar {
position: relative;
z-index: 2;
border: 2px solid #fff;
}
.avatar-group .avatar:hover {
z-index: 3;
}
.avatar-group .avatar+.avatar {
margin-left: -1rem;
}
<div style="padding:10px">
<div class="avatar-group">
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" v-tooltip="'Ryan Tompson'" data-original-title="steve Hadid">
<img alt="Image placeholder" src="https://randomuser.me/api/portraits/women/68.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Romina Hadid" v-tooltip="'Romina Hadid'"> <img alt="Image placeholder" src="https://randomuser.me/api/portraits/women/48.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm">
<div>
<i class="fa fa-plus"></i>
</div>
</a>
</div>
</div>
</div>

Answer 1

You have to assign .avatar-group{display:flex} in order to make it work
.avatar {
color: #fff;
background-color: #adb5bd;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
border-radius: 50%;
height: 48px;
width: 48px;
}
.avatar img {
width: 100%;
border-radius: 50%;
}
.avatar span {
width: 100%;
border-radius: 50%;
}
.avatar+.avatar-content {
display: inline-block;
margin-left: .75rem;
}
.avatar-lg {
width: 58px;
height: 58px;
font-size: 0.875rem;
}
.avatar-sm {
width: 36px;
height: 36px;
font-size: 0.875rem;
}
.avatar-group {
display: flex;
flex-direction: row;
}
.avatar-group .avatar {
position: relative;
z-index: 2;
border: 2px solid #fff;
}
.avatar-group .avatar:hover {
z-index: 3;
}
.avatar-group .avatar+.avatar {
margin-left: -1rem;
}
<div style="padding:10px">
<div class="avatar-group">
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" v-tooltip="'Ryan Tompson'" data-original-title="steve Hadid">
<img alt="Image placeholder" src="https://randomuser.me/api/portraits/women/68.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Romina Hadid" v-tooltip="'Romina Hadid'"> <img alt="Image placeholder" src="https://randomuser.me/api/portraits/women/48.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm">
<div>
<i class="fa fa-plus"></i>
</div>
</a>
</div>
</div>
</div>

Answer 2

You have to add CSS vertical-align:top to tag a having class avatar-sm in order to make it work
.avatar {
color: #fff;
background-color: #adb5bd;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
border-radius: 50%;
height: 48px;
width: 48px;
}
.avatar img {
width: 100%;
border-radius: 50%;
}
.avatar span {
width: 100%;
border-radius: 50%;
}
.avatar+.avatar-content {
display: inline-block;
margin-left: .75rem;
}
.avatar-lg {
width: 58px;
height: 58px;
font-size: 0.875rem;
}
.avatar-sm {
width: 36px;
height: 36px;
font-size: 0.875rem;
vertical-align: top;
}
.avatar-group {
display: flex;
flex-direction: row;
}
.avatar-group .avatar {
position: relative;
z-index: 2;
border: 2px solid #fff;
}
.avatar-group .avatar:hover {
z-index: 3;
}
.avatar-group .avatar+.avatar {
margin-left: -1rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div style="padding:10px">
<div class="avatar-group">
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" v-tooltip="'Ryan Tompson'" data-original-title="steve Hadid">
<img alt="Image placeholder" src="https://randomuser.me/api/portraits/women/68.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Romina Hadid" v-tooltip="'Romina Hadid'"> <img alt="Image placeholder" src="https://randomuser.me/api/portraits/women/48.jpg" class="rounded-circle">
</a>
<a href="#" class="avatar avatar-sm">
<div>
<i class="fa fa-plus"></i>
</div>
</a>
</div>
</div>
</div>