title: R Shiny - Vertically aligning a label and input in a horizontal form
body: <p>I am trying to vertically align an input and its label in a horizontal form. I'm not sure if it's possible to vertically align inline divs of different heights though. </p>
  
  <p>The code below gives me the following:</p>
  
  <p><a href="https://i.stack.imgur.com/QURcU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QURcU.png" alt="enter image description here"></a></p>
  
  <p>I would like the labels to sit inline with the inputs.</p>
  
  <pre><code>library(shiny)
  library(shinyWidgets)
  library(shinydashboard)
  
  ui &lt;- fluidPage(
  
    column(width = 8, 
  
      tabBox(width = 12, 
  
        tabPanel(
          'Items', 
  
          fluidRow(
            style = 'margin:2px',
  
            wellPanel(
                tags$form(class = 'form-horizontal',
                  tags$b('Filter items'),
  
                  tags$div(
                    class = 'form-group',
  
                    tags$label(class = "col-sm-3 control-label", `for` = 'type', "By type:"), 
                    column(
                      width = 9, 
                      pickerInput(
                        inputId = 'type', label = '', 
                        choices = character(0), 
                        multiple = T
                      ))), 
  
                  tags$div(
                    class = 'form-group',
  
                    tags$label(class = "col-sm-3 control-label", `for` = 'name', "By name:"), 
                    column(
                      width = 9, 
                      searchInput(
                        inputId = 'name', label = '',
                        placeholder = "Search by name",
                        btnSearch = icon("search"),
                        btnReset = icon("remove")
                      ))
                    )
                  )
                )
            )
        )
      )
    ) #/column 8
  )
  
  server &lt;- function(input, output, session) {}
  
  shinyApp(ui, server)
  </code></pre>
  
  <p>What I have tried besides <code>column(width = 3, ...)</code>:</p>
  
  <ul>
  <li>flex: <code>tags$div(class = 'form-group', style = 'display:flex;
  align-items:center;', ...)</code>  </li>
  <li>position: <code>tags$div(class = 'form-group', style = 'display:table; position:absolute;', tags$label(class = "col-sm-3 control-label", style = 'display;table-cell; vertical-align:middle;', ...), ...)</code>.</li>
  </ul>
  
  <p>I'm not well-versed in HTML so it's taking a lot of guesswork. What would be the best way to achieve the desired result? Any help would be greatly appreciated.</p>