JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<div class="tree">
  <div class="item">
    <div class="label">
      Tree
    </div>
    <div class="tree">
      <div class="item">
        <div class="label">
          <div class="connector">
            <div></div>
          </div>
          Tree item 1
        </div>
      </div>
      <div class="item">
        <div class="label">
          <div class="connector">
            <div></div>
          </div>
          Tree item 2
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

.connector {
  display: grid;
  grid-template-rows: repeat(2, 50%);
  border-left: 1px solid black;
  
  > div {
    border-bottom: 1px solid black;
  }
}

.label {
  display: grid;
  grid-template-columns: 10px 1fr;
}

.item {
  display: grid;
  grid-template-rows: auto auto;
  
  min-height: 40px;
  padding-left: 12px;
}