How to align textInput with checkbox

Question

I am making an analysis tool in Rshiny. I want to be able to select the groups to display in a reactive plot and allow for custom colors to be chosen.

This is what I have for the UI right now:

I would like for it to be more obvious that each box is related to the items in the checklist instead of hovering to the side. Optimally, I would want the textbox to be flush next to its respective checklist item and for everything to be aligned. Closer to what I've mocked up below:

This is the code snippet that makes it (colors don't match because the actual code has a function that makes the colors):

ncolors = c("red","blue","green","black")
groupColorsTextInput = list()
for (i in 1:4) {
  groupColorsTextInput = list(groupColorsTextInput, # you must use list to concatenate
                           textInput(inputId = paste0("group", i, "Color"),
                                     label = NULL,
                                     value = ncolors[i]))
}
fluidRow(column(5, checkboxGroupInput(inputId = "groups", # which groups in each plot
                         label = "Include Groups:",
                         choices = NA,
                         selected = NA)),
               column(5, groupColorsTextInput))

I realize I could just put a label to the side of the textInput's, but there should be a way to do what I'm trying to do, right? Would I need to make 4 different checkboxes and put each checkbox and textInput into its own fluidrow? Thanks.

Answer 1

library(shiny)

ncolors = c("red","blue","green","black")

checkInput <- function(index) {
    fluidRow(
        div(
            style = "
                width: 30px; bottom: 0; height: 34px; padding-right: 50px; display: inline-block;
            ", 
            checkboxGroupInput(
                inputId = paste0("groups", index), # which groups in each plot
                label = NULL,
                choices = NA,
                selected = NA
            )
        ),
        div(
            style = "
                display: inline-block;
            ", 
            textInput(
                inputId = paste0("group", index, "Color"),
                label = NULL,
                value = ncolors[index])
        )
    )
}

ui <- fluidPage(
    tags$b("Include Groups:"), br(),
    lapply(1:4, checkInput)
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

Increase the value of padding-right: 50px if your text on left is long.