HOW can I make this TIMELINE ONLY using HTML and CSS? - html

Question

How can I make the timeline from this website https://www.dealema.pt/biografia/ ONLY using HTML and CSS (NO librarys)? And NO javascript or anything, just pure HTML and CSS.
I did the first image + text responsive, but I'm having hard time adding the rest... The "timeline-02" invades "timeline-01".
I want to make this as simple as possible and still look as identical as the timeline from the website. Doens't need to be perfect, just good enough.
My HTML code:
.timeline {
width: 100%;
margin-left: 115px;
margin-bottom: 115px;
}
.timeline:before {
content: ' ';
width: 1px;
height: 100%;
background: #181818;
position: absolute;
left: 50%;
}
.timeline-01 img {
float: left;
position: relative;
margin-left: 15%;
}
.timeline-01-text {
float: right;
margin-right: 5%;
font-family: Helvetica, Arial, sans-serif;
}
.timeline-01-text p {
color: #7e7e7e;
font-size: 15px;
line-height: 1.5;
}
.timeline-01 span {
position: absolute;
left: 50%;
width: 60px;
height: 60px;
line-height: 60px;
margin-left: -28px;
text-align: center;
font-size: 15px;
font-weight: 600;
color: #FFF;
background-color: #181818;
border-radius: 60px;
}
#media only screen and (max-width: 750px) {
.timeline:before {
left: 10%;
}
.timeline-01 span {
left: 10%;
}
.timeline-01 img {
display: none;
}
}
#media only screen and (min-width: 750px) {
.timeline-01-text {
float: right;
margin-left: 50%;
margin-right: 115px;
position: absolute;
font-family: Helvetica, Arial, sans-serif;
}
}
<section class="timeline">
<div class="timeline-01">
<img src="img/album-01.png" style="width: 170px; height: auto;">
<span class="timeline-01-year">2006</span>
<div class="timeline-01-text">
<h2>EXPRESSO DO SUBMUNDO</h2>
<br>
<p>Entre rimas e batidas, nasce o primeiro trabalho dos Dealema, o mítico “Expresso do Submundo”. Uma obra de coleccionador que faz parte da história do hip-hop em Portugal e que foi recentemente reeditado em formato K7, uma prenda aos fãs que nunca
tiveram acesso comercial a este disco.</p>
</div>
</div>
<div class="timeline-02">
<img src="img/album-01.png" style="width: 170px; height: auto;">
<span>2016</span>
<div class="timeline-02-text">
<h2>EXPRESSO DO SUBMUNDO</h2>
<br>
<p>Entre rimas e batidas, nasce o primeiro trabalho dos Dealema, o mítico “Expresso do Submundo”. Uma obra de coleccionador que faz parte da história do hip-hop em Portugal e que foi recentemente reeditado em formato K7, uma prenda aos fãs que nunca
tiveram acesso comercial a este disco.</p>
</div>
</div>
</section>