Is there a way to render icons and values on the same line in a description block using bs4Dash?

Question

I'm using bs4Dash with Shiny, and I'm having some issue using the descriptionBlock() function. Below is the reproducible code. In short, I want to render both the number, and the numberIcon in the same line. If I define it as a static value, it works (first example), but if I render it server-side (second example), it renders on two different lines.

I've tried various approaches, such as using some styling, both on the dashboardpage, in the box etc. :

tags$head(
                tags$style(HTML("
                    .description-block .icon {
                        display: inline-block;
                        vertical-align: middle;
                    }
                "))
            )

which does not yield any result.

I've tried to use paste() and paste0(), neither works.

Example 1 (Static values)

This looks the way I want it to do, but I need to be able to have non-static values

library(shiny)
library(bs4Dash)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      box(
        solidHeader = FALSE,
        title = "Status summary",
        background = NULL,
        width = 4,
        status = "danger",
        fluidRow(
          column(
            width = 6,
            descriptionBlock(
              number = "17%",
              numberColor = "pink",
              numberIcon = icon("caret-up"),
              header = "$35,210.43",
              text = "TOTAL REVENUE",
              rightBorder = TRUE,
              marginBottom = FALSE
            )
          ),
          column(
            width = 6,
            descriptionBlock(
              number = "18%",
              numberColor = "secondary",
              numberIcon = icon("caret-down"),
              header = "1200",
              text = "GOAL COMPLETION",
              rightBorder = FALSE,
              marginBottom = FALSE
            )
          )
        )
      ),
      title = "Description Blocks"
    )
  ),
  server = function(input, output) { }
)

Example 2 (values rendered serverside)

library(shiny)
library(bs4Dash)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      box(
        solidHeader = FALSE,
        title = "Status summary",
        background = NULL,
        width = 4,
        status = "danger",
        fluidRow(
          column(
            width = 6,
            descriptionBlock(
              number = textOutput("percent"),
              numberColor = "pink",
              numberIcon = icon("caret-up"),
              header = "$35,210.43",
              text = "TOTAL REVENUE",
              rightBorder = TRUE,
              marginBottom = FALSE
            )
          ),
          column(
            width = 6,
            descriptionBlock(
              number = "18%",
              numberColor = "secondary",
              numberIcon = icon("caret-down"),
              header = "1200",
              text = "GOAL COMPLETION",
              rightBorder = FALSE,
              marginBottom = FALSE
            )
          )
        )
      ),
      title = "Description Blocks"
    )
  ),
  server = function(input, output) {

    output$percent <- renderText({
      "17%"
    })
   }
)

Answer 1

You have to use the inline option:

textOutput("percent", inline = TRUE)