title: Change width of dropdown with respect to browser window size Shiny
body: <p>I was trying with the following code, though I am facing few challenges,</p>
  <pre><code>library(shiny)
  library(shinyWidgets)
  
  runApp(shinyApp(
    ui = fluidPage(
      shinydashboard::dashboardPage(
        header = shinydashboard::dashboardHeader(),
        sidebar = shinydashboard::dashboardSidebar(),
        body = shinydashboard::dashboardBody(fluidRow(
          column(3, 
                 shinyWidgets::pickerInput(
                   &quot;class&quot;,
                   label = &quot;Class&quot;,
                   choices = as.character(1:3),
                   multiple = TRUE,
                   width = &quot;100%&quot;)
          ),
          uiOutput('section'),
          uiOutput('teacher'),
          column(3, 
                 shinyWidgets::pickerInput(
                   &quot;students&quot;,
                   label = &quot;Students&quot;,
                   choices = LETTERS[1:5],
                   multiple = TRUE,
                   width = &quot;100%&quot;)
          ),
          column(2,
                 actionButton(
                   &quot;query&quot;,
                   label = &quot;Apply&quot;,
                   width = &quot;90px&quot;,
                   style = &quot;margin-top: 23px;&quot;
                 )
          )
        ))
      )),
    server = function(input, output, session) {
      output$section &lt;- renderUI({
        req(input$class)
        
        column(2, shinyWidgets::pickerInput(
          &quot;sec&quot;,
          label = &quot;Section&quot;,
          choices = LETTERS[1:2],
          multiple = TRUE,
          width = &quot;100%&quot;),
          checkboxInput('test', 'Click to select test'))
      })
      
      output$teacher &lt;- renderUI({
        req(input$class)
        
        column(2, shinyWidgets::pickerInput(
          &quot;teach&quot;,
          label = &quot;Teacher&quot;,
          choices = LETTERS[1:2],
          multiple = TRUE,
          width = &quot;100%&quot;))
      })
    }
  ))
  </code></pre>
  <p>With the above code, I had to mention different column width to make it 12 as total and to align all ui elements in a row.</p>
  <p>The problem is we can't use widths with decimals in column(). So I was trying with <a href="https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw" rel="nofollow noreferrer">relative lengths css</a> (like vw) which would change sizing w.r.t. screen size but not able to apply with the above problem.</p>
  <p>My goal here is to align all ui elements in same row (except checkbox), with same width (except actionButton) and the widths would change automatically with the browser window size.</p>
  <p>So, how can I use relative length css to achieve the above goals?</p>