Adding table columns to a pure CSS Tree View

What's the issue? I have the following codepen: https://codepen.io/AleksandrHovhannisyan/embed/PoaayLO/?theme-id=modal which uses this great <details>-<summary> trick to turn an ul into a tree view where you toggle items to hide/display them. I would like to introduce 2 more columns to this Tree View, i.e., the resulting table will have the expandable li and the second and third columns will have some value that should be aligned (and only show up if its respective li counterpart is toggled open ). To make simple to explain, I have attached a GIF explaining the approach. I have also attached an example picture which describes this table with tree view and the extra 2 columns I want to introduce. What did you already try? I tried to wrap the tree (found in the codepen) in a <table> and add two columns, but this introduces all sorts of incompatibilities. So I just used turned li into a long flex box, and have two column be at the very right hand side of the flexbox to mimick a (fake) table, which is not ideal 😦 See the second GIF of my attempt at making this tree view into a table. Here is my current implementation as a codepen: https://codepen.io/sam000/pen/OJYQYgL EDIT: FollowAndrew on YouTube did a video on this exact tree view implementation https://www.youtube.com/watch?v=rvKCsHS590o I would really appreciate if you could help me! Thank you!

Codey Marcel

CodePen

TreeView with extra columns

...

FollowAndrew

YouTube

Pure CSS tree view with custom tree icons

In this tutorial we'll be creating a pure CSS solution to implement a tree view structure. This is a very common structure and typically requires javascript in order to fully complete. In this CSS only solution we'll have customizable tree icons, use pseudo elements for the 'tier' legs and arms along with several tricks along the way! 💖 SUBSC...