title: Horizontal Family tree with CSS and HTML - reversed
body: <p>I've searched the web and foud a good example of family tree <a href="http://codepen.io/anon/pen/bdLeNe" rel="nofollow">here in codepen</a>:</p>
  
  <p>I want the same thing, but rotated 180 degrees. I want to start my family tree with 16 members and descending (16-8-4-2-1) left to right.</p>
  
  <p>How can I achieve it by using/editing that code?
  Stackoverflow says i need to accompany some code to my link, so I'm just pasting the HTML here.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;&lt;span class="label"&gt;Root&lt;/span&gt;
  &lt;div class="branch lv1"&gt;
  &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-1&lt;/span&gt;
    &lt;div class="branch lv2"&gt;
      &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-1-1&lt;/span&gt;
        &lt;div class="branch lv3"&gt;
          &lt;div class="entry sole"&gt;&lt;span class="label"&gt;Entry-1-1-1&lt;/span&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-1-2&lt;/span&gt;
        &lt;div class="branch lv3"&gt;
          &lt;div class="entry sole"&gt;&lt;span class="label"&gt;Entry-1-2-1&lt;/span&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-1-3&lt;/span&gt;
        &lt;div class="branch lv3"&gt;
          &lt;div class="entry sole"&gt;&lt;span class="label"&gt;Entry-1-3-1&lt;/span&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-2&lt;/span&gt;&lt;/div&gt;
  &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-3&lt;/span&gt;
    &lt;div class="branch lv2"&gt;
      &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-3-1&lt;/span&gt;&lt;/div&gt;
      &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-3-2&lt;/span&gt;&lt;/div&gt;
      &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-3-3&lt;/span&gt;
        &lt;div class="branch lv3"&gt;
          &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-3-3-1&lt;/span&gt;&lt;/div&gt;
          &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-3-3-2&lt;/span&gt;
            &lt;div class="branch lv4"&gt;
              &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-3-3-2-1&lt;/span&gt;&lt;/div&gt;
              &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-3-3-2-2&lt;/span&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-3-3-3&lt;/span&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-3-4&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-4&lt;/span&gt;&lt;/div&gt;
  &lt;div class="entry"&gt;&lt;span class="label"&gt;Entry-5&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>