Многострочный центрированный элемент навигационной панели в bootstrap 4

У меня есть панель навигации, и она отлично работает, когда есть только однострочные элементы:

<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
            <ul class = "navbar-nav ml-auto">

                <li class = "nav-item">
                    <a class = "nav-link" href = "#">FAQ</a>
                </li>

                <li class = "nav-item">
                    <a class = "nav-link profile" href = "#">
                        <div class = "profile-info">
                            <span class = "name">Артём</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

Но когда элемент является многострочным, другие элементы теряют вертикальное выравнивание по центру и вместо этого выравнивают верх:

<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
            <ul class = "navbar-nav ml-auto">

                <li class = "nav-item">
                    <a class = "nav-link" href = "#">FAQ</a>
                </li>

                <li class = "nav-item">
                    <a class = "nav-link profile" href = "#">
                        <div class = "profile-info">
                            <span class = "name">Артём</span>
                            <span class = "balance">31337 ₽</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

Мой код SASS:

#site-header {
  background: #2d3840;
  border-bottom: solid 1px #20272d;
  height: 83px;

  .navbar-brand {
    color: white;
  }

  .nav-item {

    &:not(:first-child) {
      margin-left: 25px;
    }

    &:not(:last-child) {
      margin-right: 25px;
    }

    // General link
    a.nav-link {
      color: white;
      font-size: 16px;
      text-align: center;

      @include transition(0.5s);
      &:hover {
        @include transition(0.3s);
        color: $color-accent;
      }

      &.active {
        padding: 6px 21px 6px 21px;
        background: $color-accent;
        border-radius: 17.5px;
        box-shadow: 0 2px 10px 0 rgba(90, 175, 238, 0.6);

        &:hover {
          color: white;
          box-shadow: none;
        }
      }

      // Profile
      &.profile {
        .profile-info {
          display: inline-block;

          .name {
            display: block;
            font-weight: bold;
          }

          .balance {
            display: block;
            font-size: 16px;
            font-weight: bold;
            color: $color-accent;
          }
        }
      }
    }

  }
}

Желанный:

Итак, как центрировать элементы, когда есть многострочные элементы?