左侧垂直边框的间距

Question

当前示例使用伪类来绘制具有主要标题和子标题的小元素的行.每个具有类的元素line都需要在左侧有一条线.

问题:我不得不增加高度200%以使其工作.当内容增加时,该行进一步延伸.

一旦内容增加,时间表就会进一步扩展:https://jsfiddle.net/ss189uva/

是否有可能实现这一目标jquery？因为这需要足够灵活以承受内容区域并自动调整.

原始示例:

p {
  margin: 0;
  padding: 0;
}
.view-timeline-block {
  padding: 0 5em;
  line-height: 28px;
}
.view-timeline-block .ml-container {
  padding-left: 25px;
}
.view-timeline-block .line {
  position: relative;
}
.view-timeline-block .line:after {
  background: black none repeat scroll 0 0;
  content: "";
  height: 200%;
  left: -19px;
  position: absolute;
  top: -15px;
  width: 5px;
}
.view-timeline-block .active {
  position: relative;
}
.view-timeline-block .active:after {
  background-color: white;
  border: 5px solid black;
  border-radius: 50%;
  content: "";
  height: 8px;
  left: -25px;
  position: absolute;
  top: 6px;
  width: 8px;
  z-index: 100;
}
.view-timeline-block .active-small {
  position: relative;
}
.view-timeline-block .active-small:after {
  background: black none repeat scroll 0 0;
  border-radius: 50%;
  content: "";
  height: 12px;
  left: -23px;
  position: absolute;
  top: 9px;
  width: 12px;
}

<div class="view-timeline-block">
  <div class="main-listing">
    <div class="title active">Testing name</div>
    <div class="content line">
      <p>testing name content</p>
    </div>
    <div class="sub_name active-small">asdasdasdasd</div>
    <div class="sub_content line">
      <p>testing sub name content</p>
    </div>
  </div>
  <div class="main-listing">
    <div class="title active">Timeline 2 name</div>
    <div class="content line">
      <p>timeline 2 content</p>
    </div>
    <div class="sub_name active-small">Timeline 2 sub name</div>
    <div class="sub_content ">
      <p>timeline 2 sub content</p>
    </div>
  </div>
</div>