JSFiddle - React, Tailwind, and code Playground

by ti2005

HTML

<div class="flex-container">
  <div>Sidenav</div>
  <div>
    Content Pane
    <div>Sub 1</div>
    <div class="flex-sub_2_3">
      <div>Sub 2</div>
      <div>Sub 3</div>
    </div>

    <div>Sub 4</div>
    <div class="flex-sub_5_6">
      <div>Sub 5</div>
      <div>Sub 6</div>
    </div>
  </div>
</div>

CSS

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  /*flex-direction: row-reverse;*/
  height: 100vh;
  background-color: DodgerBlue;
}

.flex-container>div {
  background-color: #f1f1f1;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.flex-container>div:first-child {
  width: 25%;
}

.flex-container>div:last-child {
  width: 75%;
  /* display: flex; */
  /* align-items: stretch; */
}

.flex-sub_2_3,
.flex-sub_5_6 {
  display: flex;
  /* justify-content: center; */
  background-color: green;
  margin: 10px;
  /* justify-content: space-around; */
  /* align-content: stretch; */
}

.flex-sub_2_3>div,
.flex-sub_5_6>div {
  width: 100%;
  margin: 10px;
  color: #fff;
}

.flex-sub_2_3 >div:first-child, .flex-sub_5_6  >div:first-child {
  background-color: red;
}

.flex-sub_2_3>div:last-child, .flex-sub_5_6  >div:last-child {
  background-color: blue;
}