arrage `selectInput` and `pickerInput` inline on the same row

Question

In the app below I want to place a shinyWidgets::pickerInput inline next to a shiny::selectInput. Two inputs of the same kind (either pickerInput or selectInput) can be placed on the same line just by wrapping them in a div(style = "inline-block"). While the app below places the inputs on the same line / row they are not on the same level vertically. I looked at the DOM inspector but do not understand, why this is happening and how I can fix it. Any help appreciated.

library(shiny)
library(shinydashboard)
library(shinyWidgets)

shinyApp(ui = dashboardPage(
  
  header = dashboardHeader(title = "Test"), 
  
  sidebar = dashboardSidebar(disable = TRUE),
  
  body = dashboardBody(
  
    div(style = "display: inline-block;",
      selectInput("test",
                  "Select Input",
                  choices = 1:3)
    ),
    
    div(style = "display: inline-block;",
      pickerInput(
        inputId = "somevalue",
        label = "A label",
        choices = c("a", "b")
      )
    )
  
  ) # close dashbaordBody
  ), # close dashboardPage

  server = function(input, output, session) {

})

Answer 1

You can use display:flex:

  body = dashboardBody(
    
    div(style = "display: flex;",
        
        selectInput("test",
                    "Select Input",
                    choices = 1:3),

        pickerInput(
          inputId = "somevalue",
          label = "A label",
          choices = c("a", "b")
        )
    )