D3 Examples - JS Bin// source http://jsbin.com/wefecagavi

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.grid {
  border: 3px solid black;
}
​
.grid_row {
  display: flex;
}
​
.grid_col {
  flex: 1;
  border: 1px solid grey;
  border-right: 2px solid black;
}
​
.grid_col:nth-child(2) {
  flex: 3;
}
​
.grid_col:nth-child(3) {
  border-right: 1px solid grey;
}
​
.grid_col .grid_row .grid_col {
  border-right: none;
  border-left: none;
  border-bottom: none;
}
​
.grid_col .grid_row .grid_col:nth-child(2) {
  border-left: 1px solid grey;
​
}
</style>
</head>
<body>
<div class="grid">
  <div class="grid_row">
    <div class="grid_col">Title</div>
    <div class="grid_col">
      <div class="grid_row>
        <div class="grid_row">
        
        
        domr</div>
      <div class="grid_row">
        <div class="grid_col">Type</div>
        <div class="grid_col">Program</div>
      </div>
      <div class="grid_row">
        <div class="grid_col">Warmups</div>
        <div class="grid_col">Projects 1</div>
      </div>
    </div>
    <div class="grid_col">
      <div class="grid_row">Characters</div>
      <div class="grid_row">Setting</div>
      <div class="grid_row">Projects 2</div>
    </div>
  </div>
</div>
​
​
<script id="jsbin-source-css" type="text/css">.grid {
  border: 3px solid black;
}
​
.grid_row {
  display: flex;
}
​
.grid_col {
  flex: 1;
  border: 1px solid grey;
  border-right: 2px solid black;
}
​
.grid_col:nth-child(2) {
  flex: 3;
}
​
.grid_col:nth-child(3) {
  border-right: 1px solid grey;
}
​
.grid_col .grid_row .grid_col {
  border-right: none;
  border-left: none;
  border-bottom: none;
}
​
.grid_col .grid_row .grid_col:nth-child(2) {
  border-left: 1px solid grey;
​
}</script>
</body>
</html>
    