https://codepen.io/bencasalino/pen/NWPLLYQ
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto nav-flex-icons">
<li class="nav-item">
<a class="nav-link p-0 color-white" href="#">
Logout |
</a>
</li>
<li class="nav-item">
<a class="nav-link p-0 color-white" href="#">
Logged in as:
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" class="rounded-circle z-depth-0"
alt="avatar image" height="35">
</a>
</li>
</ul>
</div>
On the right side of the navbar I have two elements with the same classes that aren't being vertically aligned. I'm struggling with why they would be doing this if they have the same style and tag type.
Specifically looking at the Logout and Logged in as text. Codepen added for reference.