How do I horizontally align a picker input and action buttons in a Shiny app? - shiny

Question

The following code creates and h3 tab header, a picker input and 2 action buttons inside a class of page-header. The action buttons and slightly elevated compared to the picker input. I would like to get the action buttons to be horizontally aligned with the picker input (see red boxes in the screenshot).
How can I adjust this code to make it work.
library(shiny)
ui <- fluidPage(
div(
class = "page-header",
fluidRow(
column(
width = 8,
h3("Tab Header")
),
column(
width = 2,
pickerInput(
inputId = "picker",
label = "Picker:",
choices = c("Option 1", "Option 2", "Option 3")
)
),
column(
width = 2,
actionButton(inputId = "apply_1",
label = "Action 1",
icon = icon("play")),
actionButton(inputId = "reset_1",
label = "Action 2",
icon = icon("sync"))
)
)
)
)
server <- function(input, output) {
}
shinyApp(ui, server)

Answer 1

One option to horizontally align the pickerInput with the actionButtons would be to mimic the tag structure of the pickerInput, which looks like so:
<div>
<label>...</label>
<div>
....
</div>
</div>
For the label I added an invisible label by setting the color to transparent but there are probably more elegant approaches.
library(shiny)
library(shinyWidgets)
ui <- fluidPage(
div(
class = "page-header",
fluidRow(
column(
width = 8,
h3("Tab Header")
),
column(
width = 2,
pickerInput(
inputId = "picker",
label = "Picker:",
choices = c("Option 1", "Option 2", "Option 3")
)
),
column(
width = 2,
tags$div(
tags$label("Actions:", style="color: transparent"),
tags$div(
actionButton(
inputId = "apply_1",
label = "Action 1",
icon = icon("play")
),
actionButton(
inputId = "reset_1",
label = "Action 2",
icon = icon("sync")
)
)
)
)
)
)
)
server <- function(input, output) {
}
shinyApp(ui, server)