How to align Bootstrap 4 navbar items to bottom - css

Question

I'm trying to align the text of the navbar items lowerin bootstrap 4. My idea was to align them to the bottom of the ul and then position the ul but I seem to fail to do both. The goal is to have the text (approximately) at the same height of the brand like this:
I have found some questions but most of them are for bootstrap 3 or don't work for some reason I don't understand.
This is example html:
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
<a class="navbar-brand" style="font-family: sans-serif; font-weight: 800; font-style: italic; font-size:xx-large;">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item" >
<p style="vertical-align:bottom;" >Test</p>
</li>
<li class="nav-item<?php addActiveClass('/index.php'); ?>">
<a class="nav-link" href="index.php">Test</a>
</li>
<li class="nav-item d-none d-md-block"><img src="" id="profileImage" height="40" width="40" style="margin-right: 10px; border-radius: 5px;"></li>
</ul>
</div>
I use this bootstrap theme and example css:
.navbar
{
padding:0rem 0.75rem;
}
.navbar-brand
{
padding: 0;
margin:0;
}
.navbar-nav > li
{
line-height: 36px;
padding: 0;
margin: 0;
background: red;
}
.navbar-nav > li > a
{
padding: 0;
margin: 0;
background: red;
vertical-align: bottom;
}
.navbar-nav > li > p
{
padding: 0;
margin: 0;
background: yellow;
vertical-align: bottom;
}
A complete example is available here:
https://jsfiddle.net/d6n5z3gb/8/

Answer 1

Add align-items-end to the navbar-nav to align the items to the bottom...
<ul class="navbar-nav align-items-end ml-auto">
<li class="nav-item" >
</li>
</ul>
And, remove the custom line-height...
.navbar-nav > li > a
{
padding: 0;
margin: 0;
background: red;
vertical-align: bottom;
}
Update on Codeply: https://www.codeply.com/go/usR58ejrtg