Shiny boxes resize height dynamically

Question

I am displaying 3 shiny boxes as follows:

I have two filters countries. The headers of the boxes change based on both of the filters. Now the issue is when the header is split in two lines in the first box the height increases but the two other boxes height remain the same thus the heights are not aligned. How can I achieve the adjustment of the height automatically? An example would be great on which I can work on.

Answer 1

It is hard to test this without the example of the data but you could try to wrap the boxes in a container and apply display: flex to that container.

So the code would be something like this

library(shiny)
ui <- fluidPage(
  tags$head(
    tags$style(
        "
        .flex-container {
          display: flex;
        }
        <!--  Because I do now have actual code and figures I've added border around the box (this may not be needed in your case) only flex-container -->
        .shiny-box {
          border: 1px solid black;
          padding: 20px;
          margin: 5px;
          flex: 1;
        }
"
    )
  ),
  
  div(class = "flex-container",
      div(class = "shiny-box", "UAE customs efficiency."),
      div(class = "shiny-box", "Clear exports. some text some more text some more text gor height purposes ............"),
      div(class = "shiny-box", "Clear imports.")
  )
)

server <- function(input, output) {
  
}

shinyApp(ui, server)

And the output