Spacing gaps in Vertical border left

Question

The current example uses a pseudo class to draw a line with small elements for main titles and sub titles. Every element which has a class line will require a line on the left hand side.

Problem: i am having to increase the height to 200% to make it work. When the content is increased, that line extends further than it should.

As soon as the content increases, the timeline extends further: https://jsfiddle.net/ss189uva/

Is there a possibility of implementing this through jquery? as this needs to be flexible enough to withstand content areas and automatically adjust.

Original example:

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>

Answer 1

Just omit height altogether and specify at least two (2) opposing positional properties for the dimension you want to set: https://jsfiddle.net/ss189uva/2/

.view-timeline-block .line:after {
    background: black none repeat scroll 0 0;
    content: "";
    left: -19px;
    position: absolute;
    top: -15px;
    bottom: -15px;
    width: 5px;
}

This is taking advantage of the fact that absolutely positioned elements can be given dimension if enough properties are specified:

From MDN's documentation for position:

Most of the time, absolutely positioned elements have auto values of height and width computed to fit the contents of the element. However, non-replaced absolutely positioned elements can be made to fill the available space by specifying (as other than auto) both top and bottom and leaving height unspecified (that is, auto). Likewise for left, right, and width.

By specifying top: -15px; and bottom: -15px; and leaving height as auto, you're ensuring that the top of the pseudo is -15px from the top and that the bottom of the pseudo is -15px from the bottom; the element's height give or take 15px.