align actionbutton with selectinput horizontally in shiny

Question

In my shinydashboard, I need to put actionButton horizontally with my other selectInput s in a box. Below is my app. The actionButton does not seems to align well with other inputs. The button is in a little bit upper position. I do not understand why that happens. Does anyone know how to fix it?

library(shiny)
library(shinydashboard)


ui <- dashboardPage(
    dashboardHeader(title = "example"),
    dashboardSidebar(),
    dashboardBody(
        box(width=12,

            column(width = 3, dateRangeInput("order_dash_dateRange", "Date Range",
                                             start  = "2017-01-01",
                                             end    =  Sys.Date(),
                                             min    = "2001-01-01",
                                             max    = Sys.Date(),
                                             format = "mm/dd/yy",
                                             separator = " - ") ),

            column(width=3, selectizeInput(inputId = 'var', 
                                           label='Select variable',
                                           choices = c('cut', 'color'), 
                                           multiple=FALSE,
                                           options = list(
                                               maxItems = 1,
                                               placeholder = '',
                                               onInitialize = I("function() { this.setValue(''); }"))) ),
            column(width=3,  uiOutput("valueUI")),

            column(width=3,  actionButton('go', 'apply filter') )


        )
    )
)

server <- function(input, output, session) {

    output$valueUI = renderUI({

        if (input$var == '') {
            vals = '' 
        }
        if (input$var == 'cut') {
            vals = c('Premium', 'Good', 'Very Good', 'Fair')  
        }
        if (input$var == 'color'){
            vals = c('E', 'J', 'I', 'H')
        }

        selectizeInput(inputId = 'value', 
                       label='Select values',
                       choices = vals, 
                       multiple=FALSE,
                       options = list(
                           maxItems = 1,
                           placeholder = '',
                           onInitialize = I("function() { this.setValue(''); }")))

    })


}

shinyApp(ui, server)

Answer 1

You can fix it by manually adding same amount (height) of margin to actionButton

Since other dateRangeInput , selectizeInput , uiOutput has 20px label with 5px margin as image.

adding 25px to top will align actionButton well.

actionButton('go', 'apply filter', style = 'margin-top:25px')