How to arrange shiny objects(tables, buttons) within column spans?

Question

I am trying to output the two datatables and the arrow action-button in the same row. Currently I have the row brokendown with cs_pick_atlas table with width = 7, web_button width = 1, and the cs_list0 table with remaining width = 4. The output is not looking as symmetrical as I would expect. The spacing around the web_button is too much. I would want the tables to be tighter around the web_button.

.arrow img {
background-color: white;
height: 20px;
width: 30px;}

---

conditionalPanel(
                         condition = "input.rb == 'ec'",
                         ns = ns,
                         column(12,
                                div(box(width = 7,
                                 div(DT::dataTableOutput(ns("cs_pick_atlas")),style = "font-size:80%"))), 
                                column(
                                  linebreaks(10),
                                  tags$button(
                                    id = "web_button",
                                    class = "arrow action-button",
                                    tags$img(src = "arrow.jpg")
                                    ),
                                  width = 1),
                                box(width = 4,
                                    div(DT::dataTableOutput(ns("cs_list0")),style = "font-size:80%"))
                                ),
                         column(actionButton(inputId=ns("sel_cs"),label="Import ConceptSets"),
                         actionButton(ns("new_cs"), "New ConceptSet"),
                         actionButton(ns("refresh_cs"), "Refresh ConceptSets List", icon = icon("arrows-rotate"))
                         ,width = 12), class = "cohort_box")

UPDATE: The second table prints after the arrow. I am not successful to getting that table to next column.

conditionalPanel(
                     condition = "input.rb == 'ec'",
                     ns = ns,
                     column(12,
                            div(box(width = 7,
                             div(DT::dataTableOutput(ns("cs_pick_atlas")),style = "font-size:80%"))), 
                            uiOutput(ns('arrowButt')),
                            box(width = 4,
                                div(DT::dataTableOutput(ns("cs_list0")),
                                    style = "font-size:80%")
                                )),
                     column(actionButton(inputId=ns("sel_cs"),label="Import ConceptSets"),
                     actionButton(ns("new_cs"), "New ConceptSet"),
                     actionButton(ns("refresh_cs"), "Refresh ConceptSets List", icon = icon("arrows-rotate"))
                     ,width = 12), class = "cohort_box")



output$arrowButt <- renderUI({
      div(
        linebreaks(10),
        tags$button(
          id = ns("arrow_button"),
          class = "arrow action-button",
          tags$img(src = "arrow.jpg")
        )
      )
    })

Answer 1

I found the solution from this post : Generate UI elements side-by-side in R Shiny app

conditionalPanel(
                     condition = "input.rb == 'ec'",
                     ns = ns,
                     column(12,
                            div(box(width = 7,
                             div(DT::dataTableOutput(ns("cs_pick_atlas")),style = "font-size:80%"))), 
                            div(
                              style = " display:flex;",
                              div(uiOutput(ns('arrowButt'))),
                            box(width = 11,
                                div(DT::dataTableOutput(ns("cs_list0")),
                                    style = "font-size:80%")
                                ))),
                     column(actionButton(inputId=ns("sel_cs"),label="Import ConceptSets"),
                     actionButton(ns("new_cs"), "New ConceptSet"),
                     actionButton(ns("refresh_cs"), "Refresh ConceptSets List", icon = icon("arrows-rotate"))
                     ,width = 12), class = "cohort_box")