如何在Shiny列跨度内合理排列表格与箭头操作按钮？

我尝试在同一行输出两个DataTable和箭头样式的action-button，设置cs_pick_atlas表格宽度为7，按钮宽度为1，cs_list0表格宽度为4，但输出效果不对称，按钮周围间距过大，希望表格能贴近按钮。后续调整代码后，第二个表格跑到按钮下方，无法置于右侧列。

初始代码及样式 #

CSS样式 #

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

Shiny代码 #

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")

更新后的问题及代码 #

调整代码后，第二个表格显示在箭头下方，无法置于右侧列，修改后的代码如下：

Shiny代码 #

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")
    )
  )
})

内容的提问来源于stack exchange，提问作者sutsabs