UI and Responsive Issues - html

Question

I am facing some alignment issues in one of my websites. Basically it's a responsive issue
I have created a Pure Css Vertical Timeline and beside that timeline there are multiple paragraphs describing what the timeline is about. Now the issue I am facing is that aligning all the paragraphs vertically as same height as the timeline.
Here are codes
SCSS
.col-md-4 {
#media #{$mq9b} {
display: none;
}
#media #{$mq7b} {
display: none;
}
.timeline {
list-style-type: none;
position: relative;
#media #{$mq7b} {
padding-left: 60px;
position: relative;
left: 50%;
margin-left: -86px;
}
&:before {
content: ' ';
background: $timeline_color;
display: inline-block;
position: absolute;
left: 29px;
width: 3px;
height: 100%;
z-index: 400;
#media #{$mq7b} {
position: absolute;
left: 48px;
}
}
li {
margin: 90px 0;
padding-left: 20px;
position: relative;
#media #{$tablet} {
line-height: 34px;
}
&:before {
content: ' ';
background: $timeline_color;
display: inline-block;
position: absolute;
border-radius: 50%;
left: -36px;
width: 50px;
height: 50px;
z-index: 400;
}
a {
margin-left: 20px;
color: $black;
font: 20px $lato;
position: relative;
top: 8px;
}
i {
position: absolute;
top: 12px;
left: -22px;
z-index: 1000;
color: $black;
font-size: 24px;
}
}
}
}
.col-md-8 {
.paragraph_wrapper {
.timeline_paragraphs {
list-style-type: none;
.only_mobile_disp {
display: none;
h6 {
display: none;
#media #{$mq9b} {
display: block;
font-size: 30px;
text-align: center;
border-bottom: 1px solid #dedede;
padding-bottom: 10px
}
#media #{$mq7b} {
display: block;
font-size: 20px;
text-align: center;
border-bottom: 1px solid #dedede;
padding-bottom: 10px
}
.disp_mobile {
opacity: 0;
#media #{$mq9b} {
opacity: 1;
padding-right: 20px;
position: relative;
font-size: 16px;
padding-top: 10px;
}
#media #{$mq7b} {
// opacity: 1;
padding-right: 20px;
position: relative;
font-size: 16px;
padding-top: 10px;
}
&:before {
position: relative;
z-index: 1;
}
&:after {
position: absolute;
top: 4px;
left: 50%;
width: 30px;
height: 30px;
background-color: $timeline_color;
content: "";
margin-left: -25px;
#include border-radius(50%);
}
}
}
}
li {
margin: 90px 0;
}
}
}
}
HTML
<div class="col-md-4 col-sm-6 wow fadeInLeft" data-wow-delay="0.1s">
<ul class="timeline">
<li> 2019 <i class="fa fa-calendar" aria-hidden="true"></i></li>
<li> 2018 <i class="fa fa-calendar" aria-hidden="true"></i></li>
<li> 2016 <i class="fa fa-calendar" aria-hidden="true"></i></li>
<li> 2014 <i class="fa fa-calendar" aria-hidden="true"></i></li>
<li> 2012 <i class="fa fa-calendar" aria-hidden="true"></i></li>
<li> 2010 <i class="fa fa-calendar" aria-hidden="true"></i></li>
<li> 2002 <i class="fa fa-calendar" aria-hidden="true"></i></li>
<li> 1992 <i class="fa fa-calendar" aria-hidden="true"></i></li>
<li> 1973 <i class="fa fa-calendar" aria-hidden="true"></i></li>
</ul>
</div>
<div class="col-md-8 col-sm-12 col-xs-12 wow fadeInRight" data-wow-delay="0.2s">
<div class="paragraph_wrapper">
<ul class="timeline_paragraphs">
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>2019</h6>
</li>
<li>
Handed Over BANERGATTA CENTRAL, A Part of PRIMCO SPECTRUM.
</li>
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>2018</h6>
</li>
<li>
The Pavilion Residential Project Handed Over, Union City a mixed Development project launched.
</li>
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>2016</h6>
</li>
<li>
1.3 million sft of Workspace, Retail AND Hospitality ongoing and projected to complete Q1 2017. Handover of ‘FIESTA HOMES’ and 5 Ongoing Projects.
</li>
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>2014</h6>
</li>
<li>
2 million stf of new commercial & retail projects completed.Handover of ' watermark ' & ' crystal cove ' commenced.
</li>
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>2012</h6>
</li>
<li>
3 commercial projects completed. 5 residential projects launched.
</li>
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>2010</h6>
</li>
<li>
SJR Primecorp is incorporated.
</li>
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>2002</h6>
</li>
<li>
Commercial, Residential development begins under the new SJR identity.
</li>
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>1992</h6>
</li>
<li>
First Commercial Project. SJR Towers for Infosys.
</li>
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>1973</h6>
</li>
<li>
Founded by S Jayarama reddy. Begins with Infrastructure &dash; Airport Tarmacs, Flyover, Higways and Factories.
</li>
</ul>
</div>
</div>