How can I align the tag with the displayed text?

Question

I'm using the code below to build a shiny app but I don't get why text displays below the tag, it's supossed to be in the same line, anybody knows how to fix it? Fixed the first answear in this question to make it display the text I was aiming for, but the tag is missaligned! I don't know if there is something else needed to write in this question!

############################ GLOBAL #########################################

#1. App
if("shiny" %in% rownames(installed.packages()) == FALSE){ install.packages("shiny") }
library(shiny)

#2. Easier data handling
if("dplyr" %in% rownames(installed.packages()) == FALSE){ install.packages("dplyr") }
library(dplyr)

#3. Interactive graphs
if("plotly" %in% rownames(installed.packages()) == FALSE){ install.packages("plotly") }
library(plotly)


############################ UI #########################################
ui <- fluidPage( 
  # Set bullet size
  tags$style(type='text/css', "#select {font-size: 16px !important} "), 
  # 32px - h1() size || 24px - h2() size || 18.72px - h3() size || 16px - h4() size || 13.28px - h5() size
  navbarPage("Analysis", 
             tabPanel("Home",
                      sidebarPanel(

                        h5(tags$li(textOutput("patent_scape_tag1")))
             ),
             mainPanel(
               plotlyOutput("treemap")
               )
             )
  ))


############################ SERVER #########################################

server <- function(input, output, session) { 
  dtd1 <- NULL
  output$treemap <- renderPlotly({ 
    dtd1 <<- structure(list(V1 = structure(c(9L, 8L, 4L, 7L, 2L, 6L, 1L, 3L, 
                                            5L, 10L, 13L, 11L, 12L), .Label = c("Apple", "Avocado", "Banana", 
                                                                                "Carrot", "Mango", "Mushroom", "Onion", "Orange", "Pineapple", 
                                                                                "Strawberry", "Sweet-lemon", "Watermelon", "Wildberry"), class = "factor"), 
                           V2 = structure(c(4L, 3L, 9L, 11L, 12L, 2L, 1L, 6L, 10L, 5L, 
                                            7L, 8L, 1L), .Label = c("23", "24", "36", "42", "43", "46", 
                                                                    "48", "52", "56", "61", "82", "94"), class = "factor")), class = "data.frame", row.names = c(NA, 
                                                                                                                                                                 -13L))
    p <- plot_ly(
      dtd1,
      labels = ~ V1,
      parents = NA,
      values = ~ V2,
      type = 'treemap',
      hovertemplate = "Ingredient: %{label}<br>Count: %{value}<extra></extra>"
    )

    p
  })

  output$patent_scape_tag1 <- renderText({ 
    paste0("Topic ",
           as.character(dtd1$V1[which.max(dtd1$V2)]), 
           " reached the highest number!")
  })
} 

shinyApp(ui, server)

Answer 1

Is it what you want ?

ui <- fluidPage( 

  tags$head(
    tags$style(HTML("#patent_scape_tag1 {display: list-item;}"))
  ),

  navbarPage("Analysis", 
             tabPanel("Home",
                      sidebarPanel(
                        textOutput("patent_scape_tag1")
                      ),
                      mainPanel(
                        plotlyOutput("treemap")
                      )
             )
  )
)