valuebox is in row but renderValueBox is column

Question

I'm trying to make 2 value boxes in a row. If I use valueBox() it works but once it's renderValueBox(), it stacks them on top of each other.

Removing ### returns the text but not the color or any icons I might add

If it's not reactive it's closer but not evenly spaced

box_left <- valueBox(value = "left")
box_right<- valueBox(value = "right")
fillRow(box_left, box_right)

---
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, 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}

```

Answer 1

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}

```