Vertical Line with Branches in css

Question

I trying to draw a vertical line with multiple branches left and right sides of the line. I used pseudo class div after but when right side text there is a problem in positioning the arrow.Is there any other way to write this class.Can anyone suggest me how to write this class?

Any help appreciated. for inspiration look at this demo

.at-timeline .timeline--details {
  position: relative;
}
.at-timeline .timeline--single {
    display: flex;
    flex-direction: row;
}
.at-timeline .timeline--details,
.at-timeline .time--date {
    flex-basis: 14%;
    padding: 15px 50px;
}
.text-right { text-align: right;}
.at-timeline .timeline--details:before {
  content: "";
  position: absolute;
  width: 35px;
  height: 2px;
  top: 17%;
  right: 0;
  background: #2783e8;
}
.at-timeline:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 300%;
  top: 15%;
  left: 24%;
  background: #2783e8;
}

<div class="timeline at-timeline" style="padding: 100px;">
	<div class="timeline--single">
		<div class="timeline--details text-right">
			<h4 class="timeline--title">Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
		<span class="time--date">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</span>
	</div>
	<div class="timeline--single">
		<span class="time--date text-right">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</span>
		<div class="timeline--details reverse">
			<h4 class="timeline--title">Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
	</div>
	<div class="timeline--single">
		<div class="timeline--details text-right">
			<h4 class="timeline--title">Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
		<span class="time--date">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</span>
	</div>
</div>

Answer 1

You could accomplish it using absolute positioning and a bunch of margins and paddings like in this snippet

.at-timeline {
  position: relative;
  width: 70%;
}

.at-timeline:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 900px;
  top: 0;
  left: 50%;
  background: #2783e8;
}
.timeline--single {
  position: relative;
  margin: 50px 0;
}
.timeline--single:nth-child(odd) .timeline--details {
  margin-right: 50%;
  text-align: right;
  padding-right: 50px;
}

.timeline--single:nth-child(odd) .time--date{
  position: absolute;
  left: 50%;
  top: 0px;
  margin-left: 20px;
}
.timeline--single:nth-child(even) .time--date{ 
  position: absolute;
  right: 50%;
  top: 0px;
  margin-right: 20px;
}

.timeline--single:nth-child(even) .timeline--details {
  margin-left: 50%;
  text-align: left;
  padding-left: 50px;
}

.at-timeline .timeline--details:before {
  content: "";
  position: absolute;
  width: 35px;
  height: 2px;
  top: 10px;
  background: #2783e8;
}

.timeline--single:nth-child(odd) .timeline--details:before { 
  right: 50%;
}
.timeline--single:nth-child(even) .timeline--details:before { 
  left: 50%;
}

.timeline--title {
  margin-top: 5px;
}

<div class="timeline at-timeline" style="padding: 100px;">
	<div class="timeline--single">
		<div class="timeline--details text-right">
			<h4 class="timeline--title">Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
		<span class="time--date">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</span>
	</div>
	<div class="timeline--single">
		<span class="time--date text-right">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</span>
		<div class="timeline--details reverse">
			<h4 class="timeline--title">Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
	</div>
	<div class="timeline--single">
		<div class="timeline--details text-right">
			<h4 class="timeline--title">Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
		<span class="time--date">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</span>
	</div>
</div>