title: pyramid angular recursive html display
body: <p>I am trying to display a recursive pyramid looking tree diagram but am struggling with the basic css html implementation</p>
  
  <p>my current implementation is here...</p>
  
  <p><a href="https://dbuirep.firebaseapp.com" rel="nofollow noreferrer">https://dbuirep.firebaseapp.com</a></p>
  
  <p><strong>the goal is to be able to have balanced looking trees even with unbalanced subtrees</strong>... is this manageable?</p>
  
  <pre class="lang-css prettyprint-override"><code>.div1 {
  
  }
  
  .div2 {
    display: inline-block;
    vertical-align: top;
  }
  
  .div3 {
    display: inline-block;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="div1"&gt;
    &lt;div class="div2" *ngFor="let node of treeData"&gt;
      &lt;div class="div3"&gt;
          {{node.name}}
      &lt;/div&gt;
      &lt;div&gt;&lt;app-tree-view [treeData]="node.subnodes"&gt;&lt;/app-tree-view&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>