/*= timeline css for data in one side =*/
.timeline{

margin: 40px; 
margin-left:49px; padding-left: 39px; position: relative; 
border-left: 1px solid #ccc; /* <-- Vertical line */
box-sizing: border-box; list-style-type: none; 

}

.timeline  p { margin:0px;
font-size:15px;}

.timeline:before, .timeline:after{content: ""; position: absolute; left: -15px; margin:8px; /* <-- Position of arrows */
}

/* Top arrow */
.timeline:before{top: -18px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 12px 6px; 
border-color: transparent transparent #d1d1d1
}

/* Bottom arrow */
.timeline:after{bottom: -18px;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 6px 0 6px;
border-color: #d1d1d1 transparent transparent 

}
.timeline li{background-color: #f1f1f1;  
margin-left:1px; /* <-- Left margin of items */
border-radius: 5px; /* <-- Corners of items */
margin-top: 20px;
padding: 10px; position: relative; 
color: #333;
font-size:15px;}
.timeline li:first-child{margin-top: 0;}

/* Horizontal lines */
.timeline li:before{content: ""; width: 41px; height: 1px; background-color: #ccc; position: absolute; margin-top: 13px; left: -41px;}

.xyz {
float: left;  
margin-left:-100px !important;
position: relative;
font-weight: bold;

}