<div id="ucodes-timeline">
<li><i class="arrow"></i><div id="ucodes-still-block">Контент</div></li>
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 2</div></li>  
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 3</div></li>
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 4</div></li>  
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 5 Полный</div></li>
</div>

#ucodes-still-block {
background: #fff;
border-radius: 3px;
border: 1px solid #c3cbdf;
min-height: 60px;
}

#ucodes-timeline {
background: url(http://ucodes.ru/platform/mobile/img/3.png) repeat-y center;
}
#ucodes-timeline > li {
float: left;
clear: left;
width: calc(50% - 14px);
margin-bottom: 15px;
position: relative;
list-style: none;  
}
#ucodes-timeline > .right {
float: right;
clear: right;
}
#ucodes-timeline .arrow {
background: url(http://ucodes.ru/platform/mobile/img/2.png) no-repeat;
width: 20px;
height: 15px;
position: absolute;
top: 20px;
}
#ucodes-timeline > .left + .right > .arrow {
top: 35px;
}
#ucodes-timeline .right > .arrow {
left: calc(0% - 18px);
right: auto;
background-position: -60px -28px;
width: 19px;
}
#ucodes-timeline .left > .arrow {
left: auto;
right: calc(0% - 19px);
background-position: -41px -28px;
}
#ucodes-timeline .highlight {
clear: both;
width: auto;
float: none;
}
#ucodes-timeline .highlight .arrow {
background-image: url(http://ucodes.ru/platform/mobile/img/2.png);
background-position: -26px -28px;
height: 21px;
width: 15px;
left: 50%;
top: -20px !important;
margin-left: -7px;
}

$(function(){
$('#ucodes-timeline li:even').addClass('left');
$('#ucodes-timeline li:odd').addClass('right');
$('#ucodes-timeline li:last').addClass('highlight');
});