Turning a vertical CSS timeline into a horizontal one - html

Question

I need to make some changes to this vertical timeline, which has been made with simple HTML and CSS.
Now, my problem is: how can I turn the timeline (and the related divs) horizontal rather than vertical, without using the transform: rotate(270deg); command?
Also, the dots on the timeline do not perfectly keep their position when resizing the browser window, but so far I haven't found any better solution than using margin-left: 39.5% for keeping them on the timeline.
Anyone can help me?
Link: Here's the fiddle
.timeLine {
position: relative;
padding: 70px 0px;
text-align: center;
width: 100%;
overflow: hidden;
}
.timeLine .lineHeader:after {
content: '';
width: 3px;
position: absolute;
top: 35px;
bottom: 35px;
left: 80%;
border-radius: 50px;
background-color: #405461;
z-index: 9999;
}
.timeLine .lineFooter:before {
position: absolute;
bottom: 0;
margin: auto;
content: "\f103";
font-family: FontAwesome;
color: #405461;
font-size: 36px;
margin-left: -10px;
left: 80%
}
.timeLine .item {
float: left;
margin-bottom: 2%;
padding: 0px;
clear: left;
width: 80%;
}
.timeLine .item:before {
content: '';
width: 15px;
height: 15px;
border: 3px solid darkred;
background-color: white;
border-radius: 50%;
position: absolute;
z-index: 10000;
margin-left: 39.5%;
margin-top: -6px;
}
.timeLine .item .caption {
margin: 0px 0px 20px 100px;
width: auto;
background: #F0F0F0;
min-height: 60px;
position: relative;
color: #333;
border: 2px solid darkred;
border-right: none;
box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.5);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="timeLine">
<div class="lineHeader"></div>
<div class="lineFooter"></div>
<div class="item">
<div class="caption"></div>
</div>
<div class="item">
<div class="caption"></div>
</div>
<div class="item">
<div class="caption"></div>
</div>
</div>

Answer 1

I refactored your code a littble bit as using too high z-index value is not a good practive. It's better that you learn how z-index works than trying very high value that nobody can control.
The script is just to make dynamic position for elements.
$(document).ready(function() {
var items = $(".item");
for (var i = 0; i < items.length; i++) {
var left = $(items[i]).data('left') + 'px';
$(items[i]).css('left', left);
};
});
.timeLine {
position: relative;
text-align: center;
width: 100%;
height: 500px;
top: 40px;
}
.timeLine:after {
content: '';
height: 3px;
width: calc(80%);
position: absolute;
left: 10%;
border-radius: 50px;
background-color: #405461;
}
.timeLine:before {
position: absolute;
right: 7%;
content: "\f103";
font-family: FontAwesome;
color: #405461;
font-size: 36px;
transform: rotate(270deg);
line-height: 3px;
}
.timeLine .item {
margin-bottom: 2%;
padding: 0px;
width: 80%;
}
.timeLine .item:before {
content: '';
width: 15px;
height: 15px;
border: 3px solid darkred;
background-color: white;
border-radius: 50%;
position: absolute;
left: -7.5px;
top: -7.5px;
z-index: 1;
}
.timeLine .item {
margin: 0px 0px 20px 100px;
width: 60px;
background: #F0F0F0;
min-height: 100px;
position: relative;
color: #333;
border: 2px solid darkred;
border-top: none;
box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.5);
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="timeLine">
<div class="item" data-left="0">
<div class="caption">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
</div>
<div class="item" data-left="100">
<div class="caption">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
</div>
<div class="item" data-left="200">
<div class="caption">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
</div>
</div>