R shiny : automatic line break with two outputs side by side

[bretauv]

I'm creating a Shiny app with R shinydashboard, and I would like to display two outputs side by side but to force one of them to go below if the other becomes too large.

The code below creates a functional shiny app, but if you add variables, the correlation table becomes larger and is displayed under the heatmap :

library(easypackages)
libraries("readxl", "tidyselect", "DT", "shiny", "treemap", "plm", "shinydashboard", "data.table", "formattable", "plotly", "FactoMineR", "factoextra")

ui <- dashboardPage(
  dashboardHeader(title = "test with mtcars", titleWidth = 1000),
  dashboardSidebar(
    selectizeInput("var.cor", label = "Correlation",
                   choices = names(mtcars),
                   selected = c("mpg", "cyl"), multiple = TRUE)
  ),
  dashboardBody(
    tabsetPanel(
      tabPanel("test with mtcars",
               box(dataTableOutput("cor"),
                   width = 6),
               box(plotlyOutput("heat"),
                   width = 6)
      )
    )
  )
)

server <- function(input, output) {
  
  var.selected <- reactive({
    out <- input$var.cor
    out
  })
  
  user.selection <- reactive({
    mtcars <- mtcars[, var.selected()]
  })
  
  output$cor <- renderDataTable({
    dtable <- user.selection()
    tmp <- round(cor(dtable, use = "complete.obs", method = "pearson"), 2)
    tmp
  }) 
  
  output$heat <- renderPlotly({
    dtable <- user.selection()
    tmp <- as.matrix(cor(dtable, use = "complete.obs", method = "pearson"))
    plot_ly(x = rownames(tmp), y = colnames(tmp), z = tmp, type = "heatmap", color = I("red"))
  }) 
}


shinyApp(ui, server)

Is it possible to automatically display the heatmap under the correlation table when the latter becomes too large, while keeping the two outputs side by side when they fit together ?

StackOverflow link : https://stackoverflow.com/questions/56638861/r-shiny-automatic-line-break-with-two-outputs-side-by-side