Displaying code nesting level without using white-space

The Problem: On one hand deeply nested code is hard to read. On the other hand, visualising nesting levels are necessary to understand code. De-nesting code/html requires a lot of effort, which only improves readability, not actual code effectiveness, accuracy etc.

The Challenge: Find a new way of of displaying code nesting, that does NOT have readability issues.

I will provide a small piece of HTML, along with my first attempt at making it more readable using some colors, shapes, etc. I'm sure someone can do a better job. Let's make a breakthrough together!

Normal nesting using white-space:

Attempt 1: show nesting in margin:

attempt 2: add shapes in code to show level:

attempt 3: replace filled overlay with bordered area markers:

The code to use if you want to give it a shot

  <div id="sessionpage"
   v-if="session && !session.loading">

<div id="header2">
  <div id="backbuttonarea">
    <b-button @click="$router.push('/relationships/' + session.relationshipid)"
              class="btn btn-primary ml-3">
      <icon name="arrow-left"
            scale="1"
            style="margin-bottom:-2px;margin-right:10px" /> Save &amp; go Back
    </b-button>
  </div>
  <div id="titlearea"
       v-if="thecoach && thetrainee">

    <cSmallCoachCard v-if="thecoach && !thecoach.loading"
                     id="coach"
                     :coach="thecoach">
    </cSmallCoachCard>
    <img class="card-connect"
         src="~@/assets/connection.png"
         alt=""
         width="34">
    <cSmallTraineeCard v-if="thetrainee && !thetrainee.loading"
                       id="trainee"
                       :traineeid="relationship.traineeid"
                       :trainee="thetrainee">
    </cSmallTraineeCard>
  </div>
  <div id="invitebutton"
       v-if="start">
    <b-button @click="invite"
              class="btn mr-4"
              v-if="!inviteSent"
              :class="{'btn-light': !nowFlow, 'btn-dark': nowFlow, 'bg-primary': nowFlow}"
              :disabled="inviteSent">
      <icon name="envelope"
            class="icon"></icon>
      Invite {{isCoach? 'Coachee' : 'Coach'}}</b-button>
    <b-button @click="invite"
              class="btn btn-light mr-4"
              v-if="inviteSent"
              :class="{'btn-light': !nowFlow, 'btn-dark': nowFlow, 'bg-primary': nowFlow}"
              :disabled="inviteSent">
      <icon name="envelope-open"
            class="icon"></icon>{{isCoach? 'Coachee' : 'Coach'}} invited</b-button>
  </div>
</div>

<div id="header1">
  <cSessionBar id="sessionbar"
               :session="session"
               :sessionid="sessionid"
               @nowflow="onNowFlow"
               @earlierflow="onEarlierFlow"
               @invitecoach="invite"> </cSessionBar>

</div>