How to prevent the overlapping of two input labels in splitLayout, Shiny, R?

Question

The ui of the following example contains four selectInput. The last two of them are in a splitLayout. I noticed that, when I launch the app, the label of the last two would overlap if the window size is not large enough, as the first screenshot shows. Is it possible to make the label of the input in splitLayout dynamically change depends on the width of the window? A comparison would be the first two selectInput. As shown in the second screenshot, when I reduce the window width, the label would change to two lines. I would like to have the same behavior for the last two selectInput in splitLayout.

library(shiny)

# Define UI
ui <- fluidPage(
  mainPanel(
    selectInput(inputId = "A", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
    selectInput(inputId = "B", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
    splitLayout(
      selectInput(inputId = "C", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
      selectInput(inputId = "D", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
      # Expand the menu in splitLayout
      # From: https://stackoverflow.com/a/40098855/7669809
      tags$head(tags$style(HTML("
                              .shiny-split-layout > div {
                                overflow: visible;
                              }
                              ")))
  )
  )
)

# Server logic
server <- function(input, output, session){

}

# Complete app with UI and server components
shinyApp(ui, server)

First screenshot:

Sceond screenshot:

Update

@Simran has pointed out that overflow: visible is the cause of this issue. However, I need this to expand my menu in the selectInput based on this post: https://stackoverflow.com/a/40098855/7669809

Answer 1

I assume using fluidRow() with column() is an option for you.

Then you could use:

    fluidRow(
      column(width = 4,
        selectInput(...)
      ),
      column(width = 4,
        selectInput(...)
      )
    )

Note 1:

You can control the width of an input by the width parameter of column().

Note 2:

Sidenote: If you want to use the full width of 12, you also have to set the mainPanel() to 12, see e.g. here: https://stackoverflow.com/a/44214927/3502164

Full app - reproducible example:

library(shiny)

# Define UI
ui <- fluidPage(
  mainPanel(
    selectInput(inputId = "A", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
    selectInput(inputId = "B", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
    fluidRow(
      column(width = 4,
        selectInput(inputId = "C", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a")        
      ),
      column(width = 4,
        selectInput(inputId = "D", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a")
      )
    ),
      # Expand the menu in splitLayout
      # From: https://stackoverflow.com/a/40098855/7669809
      tags$head(tags$style(HTML("
                              .shiny-split-layout > div {
                                display: inline-block;
                              }
                              ")))
    )
)

# Server logic
server <- function(input, output, session){

}

# Complete app with UI and server components
shinyApp(ui, server)