Tree diagram - Move last child's to one level in html/css - html

Question

I want to create a tree diagram with last child's of the nodes should be in nth(last row of the tree) level. I am taking reference from here. As of now i am getting output like this(left), trying to get as right image.
I have tried with height and margin top in :before and :after, The links between the nodes are not coming correct. I am iterating the data for tree dynamically, there may be more levels if have more tree data. so need to set the line connection between node as generic. How can i get this? Suggestions please.
* {
margin: 0 auto;
padding: 0;
text-align: center;
color: black;
font-family: tahoma;
}
.items ul {
padding-top: 20px;
position: relative;
}
/* Make all children "inline" */
.items li {
/*float: left;*/
display: inline-block;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
}
/* Add horizontal connector. Note: they are 2 pseudo-elements */
.items li::before, .items li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
width: 55%;
height: 42px;
z-index: -1;
border-top: 1px solid #CCC;
}
.items li::after {
border-left: 1px solid #CCC;
left: 50%;
right: auto;
}
/* Remove left and right connector from a single child */
.items li:only-child::after, .items li:only-child::before {
display: none;
}
.items li:only-child {
padding-top: 0;
}
/* Remove "outer" connector */
.items li:first-child::before, .items li:last-child::after {
border: 0 none;
}
/* Add back the down connector for last node */
.items li:last-child::before {
border-right: 1px solid #CCC;
border-radius: 0 5px 0 0;
}
/* Add curve line to the first child's connector */
.items li:first-child::after {
border-radius: 5px 0 0 0;
}
/* Add down connector from parent */
.items ul ul::before {
content: '';
border-left: 1px solid #CCC;
z-index: -1;
height: 20px;
position: absolute;
top: 0px;
left: 50%;
width: 0;
}
/* Add cosmetic for each item */
.items li a {
font-size: 12px;
background-color: white;
border: 1px solid #CCC;
padding: 5px 10px;
height: 14px;
text-decoration: none;
display: inline-block;
border-radius: 4px;
}
/* Change bg-color while hovering each item */
.items li a:hover {
background-color: #EEF;
}
/* EXPERIMENTAL for multiple parents */
/* Add margin for the parents */
.items li a:not(:only-of-type) {
position: relative;
margin-bottom: 16px;
}
/* Add "down" connector (vertical line) from each multi-parent, EXCEPT the last one */
.items li > a:not(:last-of-type)::after{
content: '';
position: absolute;
border-left: 1px solid #CCC;
border-bottom: 1px solid #CCC;
top: 20px;
width: 75%;
height: 20px;
left: 50%;
z-index: -1;
}
/* Special case for the last multiple-parent, using border-right */
.items li > a:not(:only-of-type):last-of-type::after {
content: '';
position: absolute;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
top: 20px;
width: 50%;
height: 20px;
right: 50%;
z-index: -1;
border-bottom-right-radius: 5px;
}
/* Give the curve line to the first multiple parent .... */
.items li > a:not(:only-of-type):first-child::after {
border-bottom-left-radius: 5px;
}
/* The middle element of multi-parents*/
.items li > a:not(:first-child):not(:last-of-type)::before {
content: '';
position: absolute;
border-bottom: 1px solid #CCC;
top: 40px;
width: 50%;
right: 50%;
z-index: -1;
}
.items ul:last-of-type li {
padding-left: 0;
padding-right: 0;
}
<div class="items">
<ul>
<li>
Dagon
Veil of Discord
Other Parent Item
<ul>
<li>
Null Talisman
<ul>
<li>Circlet</li>
<li>Mantle of Intelligence
<ul>
<li>earth
<ul>
<li>marsh</li>
<li>Mantle of agiled</li>
</ul>
</li>
<li>quick sun</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>