JSFiddle - React, Tailwind, and code Playground

by darknessm0404

HTML

<ul class="tree">
    <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
{
    margin-top:100px;       
}
ul.tree li
{
    display:inline-block;
    position:relative;
    white-space:nowrap;
    background-color:grey;
}
ul.tree > li
{
}
ul.tree li > ul
{
    margin:0;
    padding:0;
    position:absolute;
    left:100%;
    top:-50%;
}

ul.tree li
{
    clear:left;
    float:left;
}

ul.tree li+li:before
{ 
    content:"\A";
    display:block; 
}

JavaScript

//Here we have a problem: they are not enough separated so after the 2nd column its not working