Timeline spacing issue with pseudo background - html

Question

I have a baseline line-height which i dont want to amend for this part of the site, but as you can see on the examples below, there are spaces between each element.
What i want to achieve?
I want the line that is aligned vertically
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 {
content: '';
position: absolute;
left: -19px;
top: 0;
width: 5px;
height: 100%;
background: black;
}
.view-timeline-block .active {
position: relative;
}
.view-timeline-block .active:after {
content: '';
position: absolute;
left: -25px;
top: 5px;
width: 7px;
height: 7px;
border-radius: 50%;
background: transparent;
border: 5px solid black;
}
.view-timeline-block .active-small {
position: relative;
}
.view-timeline-block .active-small:after {
content: '';
position: absolute;
left: -22px;
top: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: black;
}
<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>
needs to meet. Would anyone know how to accomplish this?

Answer 1

Did some slight modifications - maybe you can give it a try.
I changed the lines positions. To avoid them overlapping the circles, I added a background to those circles and gave them a higher z-index.
Last but not least, I changed the circles / dots size to make them more centered.
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: -webkit-calc(100% + 25px);
height: -moz-calc(100% + 25px);
height: -o-calc(100% + 25px);
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;
z-index: 150;
}
<div class="view-timeline-block">
<div class="main-listing">
<div class="title active">Testing name</div>
<div class="content line">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu quam facilisis, sagittis diam sit amet, consectetur est. Donec ac dolor augue. Vestibulum efficitur ante at tempor ultricies. Nullam pharetra vel arcu condimentum posuere. Cras auctor
pulvinar mattis. Quisque pulvinar eget risus non sagittis. Duis lorem sapien, rhoncus sed turpis dictum, accumsan scelerisque justo. Nullam nec turpis sit amet magna mattis gravida ut ut magna. Sed pharetra lacus eros, ac vulputate tellus rutrum
facilisis. Fusce nec justo dictum, lobortis ipsum ultricies, dapibus tellus. Vestibulum nulla nibh, pretium in semper ut, luctus molestie mi.</p>
</div>
<div class="sub_name active-small">asdasdasdasd</div>
<div class="sub_content line">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu quam facilisis, sagittis diam sit amet, consectetur est. Donec ac dolor augue. Vestibulum efficitur ante at tempor ultricies. Nullam pharetra vel arcu condimentum posuere. Cras auctor
pulvinar mattis. Quisque pulvinar eget risus non sagittis. Duis lorem sapien, rhoncus sed turpis dictum, accumsan scelerisque justo. Nullam nec turpis sit amet magna mattis gravida ut ut magna. Sed pharetra lacus eros, ac vulputate tellus rutrum
facilisis. Fusce nec justo dictum, lobortis ipsum ultricies, dapibus tellus. Vestibulum nulla nibh, pretium in semper ut, luctus molestie mi.
</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>
Update: I replaced the height: 200% by height:-webkit-calc(100% + 25px); and some other browser-specific height-calculations. Should work in all modern browsers.