How to adjust width of well panel in Shiny?

Question

Is there way to adjust the width of a well panel as shown in the image below? At the bottom is the code, if the user clicks the "Delete column" action button a conditional panel renders underneath; clicking of any other action button causes the conditional panel to disappear. I'd like the conditional panel to be surrounded in a well panel and am trying to format it nicely.

My guess is this requires some CSS.

Code:

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  br(),
  fluidRow(
      column(2,actionButton("addCol","Add column")),
      column(2,actionButton("delCol","Delete column")),
      column(2,actionButton("savTbl","Save table")),
      column(2,actionButton("clrTbl","Clear table")),
      br(),
      ),
  br(),
  shinyjs::hidden(
    div(id="delPanel",
      conditionalPanel(
        condition="input.delCol > 0 && !output.hide_panel",
        fluidRow(
          wellPanel(
            column(2,textOutput("delFlag")),
            column(3,uiOutput("delCol2"))
            )
        ),
        style = "display: none;"
      )
    )
  )
)

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

  observeEvent(input$delCol,{shinyjs::show("delPanel")})
  
  observeEvent(input$addCol|input$savTbl|input$clrTbl,{shinyjs::hide("delPanel")})
  
  output$delFlag <- renderText("Delete column:")
  
  output$delCol2 <- 
    renderUI(
      selectInput("delCol3", 
                  label = NULL,
                  choices = c(1,2,3), 
                  selected = "")
    )
}) 

shinyApp(ui, server)

Answer 1

Below is a css solution, thanks to post Shiny wellpanel width:

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  br(),
  fluidRow(
      column(2,actionButton("addCol","Add column")),
      column(2,actionButton("delCol","Delete column")),
      column(2,actionButton("savTbl","Save table")),
      column(2,actionButton("clrTbl","Clear table")),
      br(),
      ),
  br(),
  shinyjs::hidden(
    div(id="delPanel",
      conditionalPanel(
        condition="input.delCol > 0 && !output.hide_panel",
        fluidRow(tags$div(id="pane", # added
          wellPanel(
                column(2,textOutput("delFlag")),
                column(3,uiOutput("delCol2")),
          ),
          tags$style(type="text/css","#pane{font-size:14px;width:565px;}") # added
          )
        ),
        style = "display: none;"
      )
    )
  )
)

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

  observeEvent(input$delCol,{shinyjs::show("delPanel")})
  
  observeEvent(input$addCol|input$savTbl|input$clrTbl,{shinyjs::hide("delPanel")})
  
  output$delFlag <- renderText("Delete column:")
  
  output$delCol2 <- 
    renderUI(
      selectInput("delCol3", 
                  label = NULL,
                  choices = c(1,2,3), 
                  selected = "")
    )
}) 

shinyApp(ui, server)