Two sidebars in flexdashboard layout

Question

I would appreciate some css help here.
What I am trying to achieve is the following layout.

I can easily get to the layout without the right sidebar:

---
title: "Title"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: fill
    orientation: rows
    css: styles.css
runtime: shiny
---

Page 1 {data-orientation=rows}
=====================================

Row {.sidebar}
-----------------------------------------------------------------------
### Inputs 1

Row 
-----------------------------------------------------------------------

### Chart 1

### Chart 2
Row 
-----------------------------------------------------------------------

### Chart 3
Row 
-----------------------------------------------------------------------

### Chart 4

### Chart 5

I tried to add a css class to add the rigth sidebar but to no avail.

Any help will be appreciated.

Thanks.

Answer 1

I think the grid layout will be good for your situation.

/* container */
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

/* sidebar */
.sidebar {
  background-color: #729fcf;
  grid-row-start: 1;
  grid-row-end: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar:first-of-type {
  grid-column-start: 1;
}

.sidebar:last-of-type {
  grid-column-start: 4;
}

.sidebar:first-of-type > span {
  transform: rotate(-90deg);
}

.sidebar:last-of-type > span {
  transform: rotate(90deg);
}

/* charts */
[class^="chart"] {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  border: 1px solid lightgrey;
}

[class^="chart"]:not(.chart-3) {
  background-color: #76ec9b;
}

.chart-3 {
  background-color: #ee6264;
  grid-column-start: 2;
  grid-column-end: 4;
}

.chart-1,
.chart-4 {
  margin-right: 0.1rem;
}

.chart-2,
.chart-5 {
  margin-left: 0.1rem;
}

<section class="container">
  <aside class="sidebar"><span>Inputs for charts 1 and 4</span></aside>
  <div class="chart-1">Chart 1</div>
  <div class="chart-2">Chart 2</div>
  <div class="chart-3">Chart 3</div>
  <div class="chart-4">Chart 4</div>
  <div class="chart-5">Chart 5</div>
  <aside class="sidebar"><span>Inputs for charts 2 and 5</span></aside>
</section>