I have been asked to create a tree (like the plant) for a project to display results from a quiz. I need branches on both sides, 4 main branches, that have 5 other branches expending from them, as well as leaf's and potentially fruits but I cant seem to implement the fruits aspect. Im having issues placing my divs and understanding how to manipulate them for the wanted output.  

This is what I have so far but I'd like to put two of the branches of the other side of the tree and also be able to extent more divs from those branch's as I've been asked to add more branch's to appear more as a tree.

[![enter image description here](https://i.stack.imgur.com/9AGEo.png)](https://i.stack.imgur.com/9AGEo.png)

```
<div class=tree-container>

  <figure class="result-tree">
    <div data-toggle="tooltip" data-placement="top" title="Cognitive" class="cat-branch-r" style="width: 150px">
      <span class="leaf"></span>
      <span class="leaf"></span>
      <span class="leaf"></span>
    </div>
    <div data-toggle="tooltip" data-placement="top" title="Physical" class="cat-branch-r" style="width: 200px">
      <span class="leaf"></span>
      <span class="leaf"></span>
      <span class="leaf"></span>
    </div>
    <div data-toggle="tooltip" data-placement="top" title="Social Emotional" class="cat-branch-r" style="width: 180px">
      <span class="leaf"></span>
      <span class="leaf"></span>
      <span class="leaf"></span>
    </div>
    <div data-toggle="tooltip" data-placement="top" title="Spiritual" class="cat-branch-r" style="width: 130px">
      <span class="leaf"></span>
      <span class="leaf"></span>
      <span class="leaf"></span>
      </figure>
    </div>

```

I was attempting to make css for ".result-tree .cat-branch-l" and change the 2nd and 4th branch classes to the class cat-branch-l but I could never get it to go to the left side of the div. I understand it cant be done in the way I was attempting however I dont know how I may be able to do this ... Below is an image of what I was attempting to create, any help or advise would be great!

I have removed the hover elements and the alteration of width as it is handled by a controller to give the different lengths to the branches. I just left in sample widths for branch length to avoid confusion.

```
    .tree-container {
        display: flex;
        margin-top: 40px;
        margin-left: 40px;
        justify-content: space-around;
    }

    .result-tree {
        width: 35px;
        height: 500px;
        background-color: saddlebrown;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-bottom: 40px;
    }

    .result-tree .cat-branch-r {
        height: 25px;
        background-color: peru;
        border-radius: 10px;
        display: flex;
        justify-content: flex-end;
        transform: rotate(-30deg);
    }

    .result-tree .cat-branch-l {
        height: 25px;
        background-color: peru;
        border-radius: 10px;
        margin-right: 20px;
        justify-content: left;
        transform: rotate(-130deg);
    }

    .result-tree .cat-branch-r .leaf {
        width: 40px;
        height: 40px;
        background-color: green;
        border-radius: 100% 0 100% 0;
        transform: translateY(-100%);
    }

    .result-tree .cat-branch-r:hover {
        height: 25px;
        background-color: rgb(214, 189, 164);
        border-radius: 10px;
        display: flex;
        justify-content: flex-end;
        transform: rotate(-30deg);
    }

    .result-tree .cat-branch-r .leaf:hover {
        width: 40px;
        height: 40px;
        background-color: rgb(42, 173, 42);
        border-radius: 100% 0 100% 0;
        transform: translateY(-100%);
    } 

```

[![enter image description here](https://i.stack.imgur.com/D1LYI.jpg)](https://i.stack.imgur.com/D1LYI.jpg)