JSFiddle - React, Tailwind, and code Playground

by fschwiet

HTML

<div class="tree-branch-container">
    
    <div class="tree-branch-visual">
       <div>&nbsp;
       </div>
       <div>&nbsp;
       </div>
    </div>
    
    <div class="tree-branch-selected">
       <div>&nbsp;
       </div>
       <div>&nbsp;
       </div>
    </div>
    
    <div class="tree-branch-node">
       <div>one
       </div>
       <div>two
       </div>
       <div>three
       </div>
    </div>    
<div>

CSS

* {
    margin:0px;
    padding:0px;
}

.tree-branch-container {
    position: relative;
    margin:3em;
    line-height: 16px;
}

.tree-branch-visual {
    position: absolute;
    left:-0.7em;
    top: 12px;  /* border + line-height/2 = (4 + 16/2) */
    width:0.7em;
}

.tree-branch-visual * {
    border: solid black 2px;
    border-width: 0.125em 0px 0.125em 0.25em;
}    

/* this boarder is invisible, but keeps the rows aligned
   in the same manner as tree-branch visual */

.tree-branch-node *, .tree-branch-selected * {
    border: solid rgba(0,0,0,0) 2px;
    border-width: 0.125em 0px 0.125em 0.25em;
}

.tree-branch-selected {
    position:absolute;
    left:-0.7em;
    top: 12px;  /* border + line-height/2 = (4 + 16/2) */
    width: 100%
}

.tree-branch-selected *:last-of-type {

    border: solid black 2px;
    border-width: 0.125em 0px 0px 0px;
}