How to put the inline textinput label at the left of the column and the textInput box at the right of the column

[moji]

I want to write an inline label and textinput in a Shiny app, but also want to put the label at the left of the column and have the textinput box at the right of the column. The width of my page is not fixed, so I can't use margin-right after the label. Here is the code:

library(shiny)
ui <- fluidPage(
    fluidRow(
        tags$head(
            tags$style(type="text/css","label{ display: table-cell; text-align: center;vertical-align: middle; } .form-group { display: table-row;}") 
        ),
        column(5,style='background-color:#f2f2f2;min-width: 300px;',
            h4("Label Issue"),
            br(),
            div(style= " text-align: left;",
                textInput(inputId = "a",
                   label = div(style = "font-size:10px;", "This is label1. I want all labels on left"), value = 20,width = "200px")
            ),
            br(),
            div(style= " text-align: left;",
                textInput(inputId = "b",
                    label = div(style = "font-size:10pX;", "label2"), value = 10,width = "200px")
            )
         )
     )
)
server <- function(input, output,session) {
}
shinyApp(ui, server)

Here is how it looks like:

As the code example shows, when I have a long label in one line and a short label on the next line (as you can see by running the code), it doesn't look nice. How can I manage this issue?

[ginberg]

One way you can solve it is by putting the items in a custom table.

library(shiny)
ui <- fluidPage(
  fluidRow(
    tags$head(
      tags$style(type="text/css","label{ display: table-cell; text-align: center;vertical-align: middle; } .form-group { display: table-row;}") 
    ),
    column(5,style='background-color:#f2f2f2;min-width: 300px;',
           h4("Label Issue"),
           br(),
           tags$table(
             tags$tr(width = "100%",
                     tags$td(width = "60%", div(style = "font-size:10px;", "This is label1. I want all labels on left")),
                     tags$td(width = "40%", textInput(inputId = "a", label = NULL))),
             tags$tr(width = "100%",
                     tags$td(width = "60%", tags$div(style = "font-size:10pX;", "label2")),
                     tags$td(width = "40%", textInput(inputId = "b", label = NULL)))
           )
    )
  )
)
server <- function(input, output,session) {
}
shinyApp(ui, server)

[moji]

Thank you so much. That is what I wanted. However I had to specify the width of the whole table to get what I wanted:

tags$table(

to

tags$table(width = "100%",