r - valuebox is in row but renderValueBox is column

Let's apply some simple CSS styles to fix the problem

---
title: "Untitled"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Sidebar {.sidebar}
--------------------

```{r}
textInput("left", "1st text", "left")
textInput("right","2nd text", "right")
```


Column
--------------------
```{r}
tags$style(
  "
  .section.level3.value-box.bg-primary p.value{
    display: flex;
    justify-content: space-around;
  }
  "
)
```

###

```{r, fig.height=3}
output$box_left <- renderValueBox(valueBox(value = input$left) )
output$box_right <- renderValueBox( valueBox(value = input$right) )

# all of these produce the same results
fillRow(
  valueBoxOutput("box_left"), 
  valueBoxOutput("box_right")
)
# splitLayout(box_left, box_right)

# fillRow(box_left, box_right)

# fluidRow(
#   column(6, box_left),
#   column(6, box_right)
# )
```

###

```{r, fig.height=4}
mtcars
```

Column
--------------------

### 

```{r}

```

### 

```{r}

```

Add icon and captions

If you add icons and captions, only one will show up weirdly. To me, this is a bug from the package. If you inspect the elements, flexdash merged them into 1 valuebox somehow in the R code level, not the fault with HTML or CSS.

To overcome this, we make them into 2 rows and then merge 2 rows into 1 column by CSS tricks:

---
title: "Untitled"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Sidebar {.sidebar}
--------------------

```{r}
textInput("left", "1st text", "left")
textInput("right","2nd text", "right")
```


Column
--------------------

```{css}
.my-boxes {display: flex}
.section.level3.value-box.bg-primary {width: 50%}
```


<div class="my-boxes">
###



```{r, fig.height=3}
output$box_left <- renderValueBox(valueBox(value = input$left,icon = "fa-arrow-circle-o-left", caption = "left side") )
output$box_right <- renderValueBox( valueBox(value = input$right,icon = "fa-arrow-circle-o-left", caption = "right side") )


div(valueBoxOutput("box_left"))
```

###

```{r}
div(valueBoxOutput("box_right"))
```

</div>

###

```{r, fig.height=4}
mtcars
```

Column
--------------------

### 

```{r}

```

### 

```{r}

```