How to align Bootstrap 4 navbar items to bottom

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/

Solution

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

Comments

[adprocas]

You could use position: relative; and top: 10px on the p (or a) elements. I would suggest changing the markup a bit, though, so you can get what you want easier. And p doesn't seem like a good element to use in the nav. span might be better in my opinion.

[Jef Patat]

The p is just because I got completely lost, it's not there in the actual code. Thanks for the feedback.