Customizing navbar in shiny application

Question

I am trying to customize a navbarPage in a shiny application to include two logos and some custom text. While I am able to get the logos in the desired position, unfortunately the text that I desire, does not appear. Also the tab panel seems to be top aligned. How do I get my custom text to appear as well as bottom align the tab panels? Here's my code for the navbarPage

navbarPage(
    title = div(
      tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><img src=\"images/ntcc_latest.png\" alt=\"alt\" style=\"float:right;width:110px;height:100px;padding-top:1px;\"></div>');
    console.log(header)")),
      tags$script(HTML(
        "
        var header = $('.navbar > .container-fluid');
        header.append(
        '<div>
          <p>\"Training Management System\"</p>
          <h4>\"Connecting management, trainers and trainees on the same platform\"</h4>
        </div>');
        console.log(header)
        "
      )),
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:left\"><img src=\"images/dahra_latest.png\" alt=\"alt\" style=\"float:left;width:90px;height:100px;padding-top:1px;\"></div>');
    console.log(header)"))
    ),
    id = 'all',
    windowTitle = 'TMS',
    theme = "style/style.css",
    fluid = TRUE,
    collapsible = TRUE,
    source('ui/ui_home.R', local = TRUE)$value,
    source('ui/ui_dashboard.R', local = TRUE)$value,
    source('ui/ui_onboarding.R', local = TRUE)$value,
    source('ui/ui_editdb.R', local = TRUE)$value,
    source('ui/ui_btp.R', local = TRUE)$value,
    source('ui/ui_qp.R', local = TRUE)$value
  )

This is how it appears:

And this is what is desired: