Нарисуйте динамические линии с помощью HTML и CSS

Можно ли с помощью html и css нарисовать следующее?

Меня интересует только часть строк. Здесь - это то, что я пробовал до сих пор.

html:

<div class = "outer">
  <div class = "inner">
    <div class = "topPart">
      TOP
    </div>
    <div class = "middlePart">
      <div class = "program selectedProgram">
        <div class = "programName">
          foo program
        </div>

        <div class = "modulesDiv">
          <div class = "module">
           <div class = "moduleName">
             foo module foo module foo module foo module foo module
           </div>
          </div>
          <div class = "module">
           <div class = "moduleName">
             foo short name
           </div>
          </div>
          <div class = "module">
           <div class = "moduleName">
             foo module foo module foo module foo module foo module
           </div>
          </div>
        </div>
      </div>
    </div>
    <div class = "bottomPart">
      BOTTOM
    </div>
  </div>
</div>

css:

.outer {
  background-color: red;
  position: relative;
  margin: 0 auto;
  top: 40px;
  width: 200px;
  height: 2000px;
  background-image: url('https://mdn.mozillademos.org/files/7693/catfront.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.inner {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: cyan;
  width: 200px;
  height: 400px/* 100vh */
  ;
}

.topPart {
  position: absolute;
  height: 10%;
  width: 100%;
  top: 0;
  background-color: pink;
  text-align: center;
}

.middlePart {
  position: absolute;
  height: 80%;
  width: 100%;
  top: 10%;
  background-color: yellow;
  text-align: center;
}

.bottomPart {
  position: absolute;
  height: 10%;
  width: 100%;
  top: 90%;
  background-color: #66aa11;
  text-align: center;
}

.program {
  height: auto;
  text-align: left;
  width: 100%;
  cursor: pointer;
  padding-top: 5%;
  padding-bottom: 5%;
  padding-left: 5%;
  padding-right: 5%;
  word-wrap: break-word;
  border-bottom: 1px solid #afadad;
  position: relative;
}

.program.selectedProgram {
  border-left: 4px solid #289efd;
}

.program .programName {
  display: inline;
  font-size: 110%;
  color: #484646;
  padding-left: 5%;
  vertical-align: middle;
}

.selectedProgram.program .programName {
  font-weight: bold;
  color: #289efd;
}

.program:hover .programName {
  color: #289efd;
}

.program .programName {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap !important;
  white-space: -webkit-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}

.modulesDiv {
  height: auto;
  width: 100%;
  position: relative;
  padding-left: 5%;
  padding-top: 5%;
  display: none;
}

.selectedProgram .modulesDiv {
  display: block;
}

.module {
  height: auto;
  text-align: left;
  width: 100%;
  cursor: pointer;
  padding-top: 5%;
  padding-bottom: 5%;
  padding-left: 5%;
  padding-right: 5%;
  word-wrap: break-word;
  position: relative;
}

.program .moduleName {
  display: inline;
  font-size: 110%;
  color: #484646;
  padding-left: 5%;
  vertical-align: middle;
}

.selectedModule.module .moduleName {
  font-weight: bold;
  color: #289efd;
}

.module:hover .moduleName {
  color: #289efd;
}

Здесь я столкнулся с двумя проблемами.

1. Я не знаю, как нарисовать произвольно расположенную линию, используя только html и css.
2. Я не могу заранее угадать, какую высоту займет каждый модуль, и, следовательно, не могу сделать вывод в коде, когда мне придется рисовать горизонтальный выступ к имени модуля.

Я называю основное имя, выделенное жирным шрифтом на снимке экрана, именем программы, а имена с отступом слева - именами модулей.

Надеюсь, здесь кто-то сможет хоть чем-то помочь.