Div height affecting adjcent item in the same row - css

Question

I have styling problem where my avatar image height will affect other inline items next to it. The image below is to illustrate the problem.
So if you see when I make my avatar logo taller it'll bring down the navigation links.
I want my avatar image not to affect the links next to it.
Here's my css and html:
.terms-link {
display: inline-flex;
align-items: center;
margin-right: -9px;
}
.user {
width: 153px;
}
.terms {
width: 103px;
}
.dropdown {
position: absolute;
right: 0;
padding: 30px 50px 30px 0;
background-color: #336F9C;
margin-top: 17px;
z-index: 10;
}
.right-side {
display: flex;
align-items: center;
}
.sign-up {
display: inline;
color: white;
margin-left: 1rem;
margin-right: 1rem;
}
.sign-up a {
padding: 5px;
}
nav a.is-active {
border-bottom: 3px solid #00aedb;
}
nav a.is-active.transparent {
border-bottom: 0;
color: #00aedb !important;
}
nav {
margin-bottom: 0;
}
nav a {
padding: 0 1.5rem 17px 1.5rem;
position: relative;
color: white;
text-decoration: none;
font-size: medium;
}
.explore-beta span {
font-size: x-small;
font-style: italic;
}
.spacer {
display: inline;
font-size: medium;
padding: 0 1rem 17px 1rem;
color: white;
}
.avatar-frame{border: 1.5px solid #c7b89e;}
.avatar-frame,.avatar-frame img{
width:30px;
height: 30px;
-webkit-border-radius: 50%; /* Saf3+, Chrome */
border-radius: 50%; /* Opera 10.5, IE 9 */
/*-moz-border-radius: 50%; Disabled for FF1+ */
}
<div class="right-side">
<nav>
<a routerLink="/initiatives" routerLinkActive="is-active">Initiatives</a>
<a routerLink="/search" routerLinkActive="is-active">Summary</a>
<a routerLink="/clinical" routerLinkActive="is-active">Clinical Filtering</a>
<a routerLink="/explore" routerLinkActive="is-active">Explore</a>
<a routerLink="/beacon" routerLinkActive="is-active">Beacon</a>
<a routerLink="/about" routerLinkActive="is-active">About</a>
<a *ngIf="!auth.authenticated()" class="sign-up">
<a (click)="auth.login()">Log in</a>
<div class="spacer">|</div>
<a (click)="openSignUpDialog()">Sign up</a>
</a>
<a *ngIf="auth.authenticated()" [ngClass]="{'is-active': termsLinkActive}" (click)="toggleUser($event)" class="avatar-link">
<span class="terms-link">
<div class="avatar-frame">
<img [src]="userPicture" />
</div>
</span>
<div *ngIf="userDropdown" [ngClass]="['user', 'dropdown']" (click)="auth.logout()">
<a>Log out</a>
</div>
</a>
</nav>
</div>

Answer 1

You can use position:absolute on your avatar-link class to remove it out of the default document flow and set its parent i.e. nav to position:relative;
This will ensure avatars dimensions do not effect its siblings.
div{
border: 1px solid black;
}
nav {
position: relative;
}
.avatar-link {
position: absolute;
border: 1px solid red;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.terms-link {
display: inline-flex;
align-items: center;
margin-right: -9px;
}
.user {
width: 153px;
}
.terms {
width: 103px;
}
.dropdown {
position: absolute;
right: 0;
padding: 30px 50px 30px 0;
background-color: #336F9C;
margin-top: 17px;
z-index: 10;
}
.right-side {
display: flex;
align-items: center;
}
.sign-up {
display: inline;
color: white;
margin-left: 1rem;
margin-right: 1rem;
}
.sign-up a {
padding: 5px;
}
nav a.is-active {
border-bottom: 3px solid #00aedb;
}
nav a.is-active.transparent {
border-bottom: 0;
color: #00aedb !important;
}
nav {
margin-bottom: 0;
}
nav a {
padding: 0 1.5rem 17px 1.5rem;
position: relative;
color: white;
text-decoration: none;
font-size: medium;
}
.explore-beta span {
font-size: x-small;
font-style: italic;
}
.spacer {
display: inline;
font-size: medium;
padding: 0 1rem 17px 1rem;
color: white;
}
.avatar-frame {
border: 1.5px solid #c7b89e;
}
.avatar-frame,
.avatar-frame img {
width: 30px;
height: 30px;
-webkit-border-radius: 50%;
/* Saf3+, Chrome */
border-radius: 50%;
/* Opera 10.5, IE 9 */
/*-moz-border-radius: 50%; Disabled for FF1+ */
}
<div class="right-side">
<nav>
<a routerLink="/initiatives" routerLinkActive="is-active">Initiatives</a>
<a routerLink="/search" routerLinkActive="is-active">Summary</a>
<a routerLink="/clinical" routerLinkActive="is-active">Clinical Filtering</a>
<a routerLink="/explore" routerLinkActive="is-active">Explore</a>
<a routerLink="/beacon" routerLinkActive="is-active">Beacon</a>
<a routerLink="/about" routerLinkActive="is-active">About</a>
<a *ngIf="!auth.authenticated()" class="sign-up">
<a (click)="auth.login()">Log in</a>
<div class="spacer">|</div>
<a (click)="openSignUpDialog()">Sign up</a>
</a>
<a *ngIf="auth.authenticated()" [ngClass]="{'is-active': termsLinkActive}" (click)="toggleUser($event)" class="avatar-link">
<span class="terms-link">
<div class="avatar-frame">
<img [src]="userPicture" />
</div>
</span>
<div *ngIf="userDropdown" [ngClass]="['user', 'dropdown']" (click)="auth.logout()">
<a>Log out</a>
</div>
</a>
</nav>
</div>