align actionbutton with selectinput horizontally in shiny

Question

In my shinydashboard, I need to put actionButton horizontally with my other selectInputs 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')