JS Bin // source http://jsbin.com/befowodagu

<!DOCTYPE html>
<html>
<head>
<script src="https://vuejs.org/js/vue.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.container {
  display: flex
}

.outer-box {
  background: red;
  height: 200px;
  width: 100px;
  display: flex;
  flex-direction: column;
  
  flex: 1;
  margin-right: 2px;
}

.outer-box:nth-child(2) {
  flex: 4;
}

.outer-box:nth-child(3) {
  flex: 2;
}

.inner-box {
  width: 100%
  height: 50px;
  display: flex;
  flex-direction: row;
  flex: 1;
  border-bottom: 2px solid;
  align-items: left;
  background: blue;
}

.inner-box:nth-child(3) {
  flex: 2;
}

h5: {
  color: grey;
}

.sub-box {
  height: 100%;
  background: green;
  display: flex;
  flex: 1;
  margin-right: 2px;
}

.sub-box:first-child {
  flex: 2;
}
</style>
</head>
<body>
<nav>
  <div class="container">
    <div class="outer-box">Item 1</div>
    <div class="outer-box">
      <div class="inner-box">
        <h5>Story</h5>
        <p>The droid foreces..</p></div>
      <div class="inner-box">
        <div class="sub-box"><h5>Type</h5></div>
        <div class="sub-box"><h5>Program</h5></div>
       </div>
      <div class="inner-box">
        <div class="sub-box"><h5>Warmups</h5></div>
        <div class="sub-box"><h5>Projects 1</h5></div>
       </div>
    </div>
    <div class="outer-box">
      <div class="inner-box">Characters</div>
      <div class="inner-box">Setting</div>
      <div class="inner-box">Projects 2</div>
    </div>
  </div>