JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tree desc3">
    <li>
        <a href="#">Child</a>
        <ul>
            <li>
                <a href="#">Ancestor 1</a>
                <ul>
                    <li>
                        <a href="#">Ancestor 1A</a>
                        <ul>
                            <li>
                                <a href="#">Ancestor 1AA</a>
                            </li>
                            <li>
                                <a href="#">Ancestor 1AB</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Ancestor 1B</a>
                        <ul>
                            <li>
                                <a href="#">Ancestor 1BA</a>
                            </li>
                            <li>
                                <a href="#">Ancestor 1BB</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Ancestor 2</a>
                <ul>
                    <li>
                        <a href="#">Ancestor 2A</a>
                        <ul>
                            <li>
                                <a href="#">Ancestor 2AA</a>
                            </li>
                            <li>
                                <a href="#">Ancestor 2AB</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Ancestor 2B</a>
                        <ul>
                            <li>
                                <a href="#">Ancestor 2BA</a>
                            </li>
                            <li>
                                <a href="#">Ancestor 2BB</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
       ...

CSS

ul.tree
{
    display: block;
    width:100%;
}
ul.tree li
{
    display: block;
    float: left;
    clear: left;
    position:relative;
    white-space:nowrap;
    list-style: none;
    height: 1em;
    padding-right: 1em;
    width:20%;
}

ul.tree li:after {
    content: '';
    position: absolute;
    border-right: 1px solid #000;
    right: .5em;
}

ul.tree a {
   display: block;
   background-color:#CCC;
   font-size: .8em; 
   position: relative; 
}

ul.tree a:before,
ul.tree a:after {
   content: '';
   position: absolute;
   border-top: 1px solid #000;
   top: .6em; 
   width: .6em;    
}

ul.tree a:before {
   right: 100%; 
}

ul.tree li > ul
{
    margin:0;
    padding:0;
    position:absolute;
    left:100%;
}

ul.desc3 {
    height: 15em; /*3 for child + 2*1 + 2*2 + 2*3 */
}

ul.desc3 > li {
    margin-top: 7em;
}

ul.desc3 > li > a:before {
    display: none;
}

ul.desc3 > li:after {
    height: 8em;
    top: -3.5em;
}

ul.desc3 > li > ul > li:first-child {
    margin-top: -5em;
}
ul.desc3 > li > ul > li:last-child {
    margin-top: 3em;
}

ul.desc3 > li > ul > li:after {
    height: 4em;
    top: -1.5em;
}

ul.desc3 > li > ul > li > ul > li:first-child {
    margin-top: -3em;
}
ul.desc3 > li > ul > li > ul > li:last-child {
    margin-top: 1em;
}
ul.desc3 > li > ul > li > ul > li:after {
    height: 2em;
    top: -.5em;
}


ul.desc3 > li > ul > li > ul > li > ul > li:first-child{
    margin-top: -2em;
}
ul.desc3 > li > ul > li > ul > li > ul > li:last-child {
    margin-top: 0em;
}
ul.desc3 > li > ul > li > ul > li > ul > li > a:after {
    display: none;
}