What's the most optimal way of connecting divs with a line to represent a hierarchy?

Question

I was trying to figure out a solution to the problem in question, some of the solutions that came to my mind is to use after pseudo-element for each subtask with only left and bottom border visible and position it relatively, but that won't work, if i have tasks going multiple layers deep. I can't really put each task inside divs with border, because they would end in awkward places and not be valid html.

The best solution I can think of, is to use a single div to contain all subtasks and make a vertical line. To make horizontal lines I'd use a before pseudo-element in each subtask. That should work fine, right?

I'm using react for this project, each task is a react component.

The design in quesiton:

Answer 1

this is a naive solution:

      html {
        box-sizing: border-box;
      }
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }
      .cards {
        width: 800px;
        margin: 0 auto;
      }
      .card {
        width: 100%;
        background: #fff;
        background-color: #fff;
        margin: 0 0 10px 0;
        box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
        border-radius: 8px;
        padding: 20px;
        position: relative;
        clear: both;
      }
      .parent {
        height: auto;
      }
      .child {
        float: right;

        width: 100%;
        border-left: 1px dotted #ccc;
        padding-left: 20%;
      }
      .child .card:after {
        content: '';
        width: 25%;
        border: 1px dotted #ccc;
        position: absolute;
        left: -25%;
        top: 50%;
      }

    <div class="cards">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="parent">
        <div class="card">Card 3</div>
        <div class="child">
          <div class="card">Child card 1 of Card 3</div>
          <div class="parent">
            <div class="card">Child card 2 of Card 3</div>
            <div class="child">
              <div class="parent">
                <div class="card">Child card 1 of Child Card 2</div>
                <div class="child">
                  <div class="card">Child card 1 of Child Card 1</div>
                </div>
              </div>
            </div>
          </div>
          <div class="card">Child card 3 of Card 3</div>
          <div class="card">Child card 4 of Card 3</div>
          <div class="card">Child card 5 of Card 3</div>
          <div class="card">Child card 6 of Card 3</div>
          <div class="card">Child card 7 of Card 3</div>
        </div>
      </div>
      <div class="card">Card 4</div>
    </div>

Here in codepen.