How do you left and right align parts of a text in RShiny's UI?

Question

See the red text after you run this little program. I want to right-align that portion.

I thought this would be quite simple. I've tried everything but the right answer.

library(shiny)
library(shinythemes)

ui=fluidPage(
  navbarPage("hi",theme=shinytheme("cerulean"), 
    tabPanel("example", fluid = TRUE, icon = icon("globe-americas"),
      sidebarLayout(
        sidebarPanel( p(style="text-align: center; ","sidepanel text")
        ),
        mainPanel(
          fluidRow(column(width=12,
            p("first box",style="font-size:125%;padding:12px;color:black; background-color:#fafafc"),
            div(strong("All I want is"),
                br(),
                p("for the text in red",span("to be on the right side of this container",style="align-text: right; color: red"),
                  br(),
                style="font-size:125%;padding:12px;color:black; background-color:#fafafc"),
            hr(),
            ),                   
           column(width=12,p("third box",style="font-size:125%;padding:12px;color:black; background-color:#fafafc"))
        ))
    )))))

  server=function(input, output,session) {}
  shinyApp(ui=ui, server=server)

https://stackoverflow.com/questions/12438339/how-may-i-align-text-to-the-left-and-text-to-the-right-in-the-same-line. Bunch of possibilities. — TarJae, Feb 03 '21 at 21:02

score 1 · Accepted Answer · answered Feb 03 '21 at 21:36

Did this with HTML tags while trying to mimicking the HTML DOM structure and element classes just the way Shiny would create them.

Two 6-width column elements within a 12-width column to put the content side by side. I did not change much inside each column.

library(shiny)
library(shinythemes)

ui <- fluidPage(
  navbarPage(
    "hi", theme=shinytheme("cerulean"), 
    tabPanel("example", fluid = TRUE, icon = icon("globe-americas"),
             sidebarLayout(
               
               sidebarPanel(p(style="text-align: center; ","sidepanel text")),
               
               mainPanel(
                 fluidRow(
                   div("first box",
                       style="font-size:125%;padding:12px;color:black; background-color:#fafafc", 
                       class="col-sm-12"
                   ),
                   column(12L, strong("All I want is")), 
                   div(
                     div(p("for the text in red", 
                           style="text-align:left; color:black"),
                         class = "col-sm-6", style = "padding-left:0"),
                     div(p("to be on the right side of this container", 
                           style="text-align:right; color:red"),
                         class = "col-sm-6", style = "padding-right:0"),
                     style="font-size:125%;padding:12px;background-color:#fafafc; margin-top:12px", 
                     class="col-sm-12")
                 ),
                 hr(),
                 fluidRow(
                   div("third box",
                       style="font-size:125%;padding:12px;color:black; background-color:#fafafc", 
                       class="col-sm-12")
                 )
               )
             )
)))

server=function(input, output,session) {}

shinyApp(ui=ui, server=server)

Appreciate it. Though I would like to add that the intended way of saying "thank you" on stackoverflow is to accept and/or upvote. — Jan, Feb 06 '21 at 20:53

How do you left and right align parts of a text in RShiny's UI?

1 Answers1