The MWE code shown below works exactly as I would like, where the sidebar panel width remains fixed while the main panel expands as the user manually increases the size of the window. Instead of the UI structure I use in the below code, is it possible to do the same thing but instead using the following UI structure with CSS to fix the width of the sidebar panel? The below UI structure is better in my case because would be much easier to integrate into my larger code:

fluidPage(
  sidebarPanel(...),
  mainPanel(...)
)

MWE code:

library(DT)
library(shiny)

ui <- fluidPage(
  div(
    style = "display: flex; align-items: flex-start;",
    div(
      class = "sidebar",
      style = "flex-shrink: 0; max-width: 280px; min-width: 280px;",
      wellPanel(
        h2("Sidebar Panel"),
        selectInput("species", "Select Species:", 
                    choices = c("All", unique(as.character(iris$Species))),
                    selected = "All")
      )
    ),
    div(
      class = "main-panel",
      style = "flex-grow: 1; margin-left: 20px;",  # main panel left margin
      h2("Main Panel"),
      dataTableOutput("table")
    )
  )
)

server <- function(input, output) {
  output$table <- renderDataTable({
    if (input$species == "All") {
      iris
    } else {
      subset(iris, Species == input$species)
    }
  }, options = list(pageLength = 10))
}

shinyApp(ui = ui, server = server)