Untitled

<head>
    <meta charset="UTF-8" />
    <title>Hierarchy Chart</title>
</head>
<link rel="stylesheet" href="hierarchy-chart.css">
<body>

    <div class="wbs">

        <ol class="org-view">
            <li>

                <div class="node" for="node-1">1. Root node</div>
                <input type="checkbox" checked id="node-1" />

                <ol class="list-view">
                    <li>

                        <div class="node" for="node-1-1">AAAA</div>
                        <input type="checkbox" checked id="node-1-1" />

                        <ol class="list-view">
                            <li>
                                <div class="node">BBBB</div>
                            </li>
                        </ol>

                        <ol class="org-view">
                            <li>

                                <div class="node" for="node-1-1-2">CCCC</div>
                                <input type="checkbox" checked id="node-1-1-2" />

                                <ol class="list-view">
                                    <li>
                                        <div class="node">DDDD</div>
                                    </li>
                                </ol>

                                <ol class="list-view">
                                    <li>
                                        <div class="node">EEEE</div>
                                    </li>
                                </ol>
                            </li>
                        </ol>
                    </li>
                </ol>

                <ol class="org-view">
                    <li>

                        <div class="node" for="node-1-2">FFFF</div>
                        <input type="checkbox" checked id="node-1-2" />

                        <ol class="list-view">
                            <li>

                                <div class="node" for="node-1-2-1">GGGG</div>
                                <input type="checkbox" checked id="node-1-2-1" />

                                <ol>
                                    <li>
                                        <div class="node">HHHH</div>
                                    </li>
                                    <li>
                                        <div class="node">IIII</div>
                                    </li>
                                </ol>
                            </li>
                        </ol>

                        <ol class="list-view">
                            <li>

                                <div class="node" for="node-1-2-2">JJJJ</div>
                                <input type="checkbox" checked id="node-1-2-2" />

                                <ol>
                                    <li>
                                        <div class="node">KKKK</div>
                                    </li>
                                    <li>
                                        <div class="node">LLLL</div>
                                    </li>
                                </ol>
                            </li>
                        </ol>
                    </li>
                </ol>

                <ol class="list-view">
                    <li>
                        <div class="node">MMMM</div>
                    </li>
                </ol>

                <ol class="list-view">
                    <li>
                        <div class="node">NNNN</div>
                    </li>
                </ol>
            </li>
        </ol>

    </div>
</body>

</html>

body {background-color: white;}
.wbs {
  display: grid;
  border: 4px solid #eee;
  position: relative;
}
.wbs ol {
  list-style-type: none;
  padding-left: 10px;
}

.org-view {
  border: 1px dashed red;
  margin: auto;
 }
.org-view >li > .node:first-child {
  margin-left: auto;
  margin-right: auto;
}

.list-view {
  border: 1px dashed lightgreen;
  vertical-align: top;
}


/* Tree view collapsible functionalities */
.wbs input {
  //display: none;
}
.wbs input ~ ol {
  display: none;
}
.org-view >li > .node:first-child {
  margin-left: auto;
  margin-right: auto;
}


.org-view > li > input:checked ~ ol {
  display: inline-block;
}

.org-view .list-view input:checked ~ ol {
  display: block;
}

.org-view .org-view input:checked ~ ol {
  display: inline-block;
}

.node {
  margin-top: 10px;
}


.node {
  color: blue;
  position: relative;
  background-color: white;
  border-radius: 3px;
  border: 2px solid #4285F4;
  //display: inline-block;
  width: 100px;
  padding: 4px;
  vertical-align: top;
}