align the UI boxes in R shiny

Question

I would like to align the three boxes below from the UI part of an R shiny to the same horizontal level. They originally were on the same level, However, after I added the helper text ("Label:"), they are no longer on the same level. Any suggestion? Thank you. Below is a reproducible code.

library(shiny)
library(miniUI)

ui <- miniPage(
    
    gadgetTitleBar(h3(strong("UI"), align="center"), left=NULL, right=NULL),
    
    miniTabstripPanel(
        
        miniTabPanel(strong("temp"),
                     
                     miniContentPanel(
                         
                             fluidRow(
                                 
                                 column(4, radioButtons(inputId="subt", label="Step1:", 
                                                        inline=TRUE, choices=c("YES", "NO"), selected="YES"),
                                        
                                        conditionalPanel(
                                            condition = "input.subt == 'YES'",
                                            fluidRow(
                                                column(4, textInput(inputId="subt.id", label="The step 1 is ...:", ""))
                                            )
                                        )
                                 ),
                                 ###
                                 
                                 ### Normalize the response
                                 column(6, radioButtons(inputId="norm", label="Step2:", 
                                                        inline=TRUE, choices=c("YES", "NO"), selected="YES"),
                                        
                                        conditionalPanel(
                                            condition = "input.norm == 'YES'",
                                            fluidRow(align="center",
                                                     column(4, textInput(inputId="norm.start", label="step 2.1:", "")),
                                                     helpText("Label:"),
                                                     column(4, textInput(inputId="norm.from", label="step 2.2:", "")),
                                                     column(4, textInput(inputId="norm.to", label="step 2.3:", ""))
                                            )
                                        )
                                 )
                             )
                         )
       
)
))

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Answer 1

You can apply some css to align the label text.

div(helpText("Label:"),style = "margin-top: -35px"),

Complete code :

library(shiny)
library(miniUI)


ui <- miniPage(
  
  gadgetTitleBar(h3(strong("UI"), align="center"), left=NULL, right=NULL),
  
  miniTabstripPanel(
    
    miniTabPanel(strong("temp"),
                 
                 miniContentPanel(
                   
                   fluidRow(
                     
                     column(4, radioButtons(inputId="subt", label="Step1:", 
                                            inline=TRUE, choices=c("YES", "NO"), selected="YES"),
                            
                            conditionalPanel(
                              condition = "input.subt == 'YES'",
                              fluidRow(
                                column(4, textInput(inputId="subt.id", label="The step 1 is ...:", ""))
                              )
                            )
                     ),
                     ###
                     
                     ### Normalize the response
                     column(6, radioButtons(inputId="norm", label="Step2:", 
                                            inline=TRUE, choices=c("YES", "NO"), selected="YES"),
                            
                            conditionalPanel(
                              condition = "input.norm == 'YES'",
                              fluidRow(align="center",
                                       column(4, textInput(inputId="norm.start", label="step 2.1:", "")),
                                       div(helpText("Label:"),style = "margin-top: -35px"),
                                       column(4, textInput(inputId="norm.from", label="step 2.2:", "")),
                                       column(4, textInput(inputId="norm.to", label="step 2.3:", ""))
                              )
                            )
                     )
                   )
                 )
                 
    )
  ))

server <- function(input, output) {
  
}




shinyApp(ui = ui, server = server)