How to adjust the position of a Shiny Widgets numeric input box using CSS?

I've been fiddling with the below R Shiny code, that uses the shinyWidgets::autonumericInput(...) function, to vertically center the numeric input box in the same "row" as the container with the label "Periods (x-axis):". Currently as shown in the image below the numeric input box does not align well with the label. I've tried adjusting padding, margins, various forms of div(...) with align-items: center, etc., and nothing seems to work. Any suggestions for how to fix the alignment?

The below shows the current alignment on the left versus what I'm trying to get to on the right. Also, since the container height is adjustable, I'd like to have the numeric input box automatically center vertically regardless of the height of the container, if possible:

Here is the code:

library(shiny)

numInputFun <- function(
    inputId,
    value = 60,
    ns = identity
) {
  label <- tags$span(
    style = "display: flex; align-items: center;",
    "Periods (x-axis):"
  )
  container_style <- paste0(
    "background-color: #f0f0f0;",
    "display: flex;",
    "align-items: center;",
    "height: 34px;"
  )
  input_box <- shinyWidgets::autonumericInput(
    inputId = ns(inputId),
    label = NULL,
    value = value,
    style = paste0("height: 28px;")
  )
  div(
    style = container_style,
    label,
    input_box
  )
}

mod30_A_ui <- function(id) {
  ns <- NS(id)
  tagList(
    br(),
    numInputFun(inputId = "periods",ns = ns)
  )
}

mod30_A_server <- function(id, mod10_data = NULL) {
  moduleServer(id, function(input, output, session) {ns <- session$ns})
}

# Dummy parent App for running module on test basis
ui <- fluidPage(mod30_A_ui("mod30_A"))
server <- function(input, output, session) { mod30_A_server("mod30_A") }
shinyApp(ui, server)

This is because .form-group has margin-bottom: 15px by default. You could set the margin to 0:

library(shiny)

numInputFun <- function(inputId, value = 60, ns = identity) {
  label <- tags$span(style = "display: flex; align-items: center;", "Periods (x-axis):")
  container_style <- paste0(
    "background-color: #f0f0f0;",
    "display: flex;",
    "align-items: center;",
    "height: 34px;"
  )
  input_box <- shinyWidgets::autonumericInput(
    inputId = ns(inputId),
    label = NULL,
    value = value,
    style = paste0("height: 28px;")
  ) |> tagAppendAttributes(style = "margin: 0;")
  div(style = container_style, label, input_box)
}

mod30_A_ui <- function(id) {
  ns <- NS(id)
  tagList(br(), numInputFun(inputId = "periods", ns = ns))
}

mod30_A_server <- function(id, mod10_data = NULL) {
  moduleServer(id, function(input, output, session) {
    ns <- session$ns
  })
}

# Dummy parent App for running module on test basis
ui <- fluidPage(mod30_A_ui("mod30_A"))
server <- function(input, output, session) {
  mod30_A_server("mod30_A")
}
shinyApp(ui, server)