not sure if this is what are you looking for?
Are you trying to do a list like this?
You sure can add more arrows and all the thigns that you can see here.
I have added the arrows in icon fonts, I have not edited it exactly like in your example, because I don't know what exactly do you need.
.list {
display: inline;
}
.list p {
display: inline;
}
.year {
padding-left: 20px;
}
.arrow {
padding-left: 50px;
}
.text {
padding-left: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul class="list">
<li>
<p class="year">1985 - 1986</p>
<ion-icon class="arrow" name="arrow-forward-outline"></ion-icon>
<p class="text">Studien aufhenthalt....</p>
</li>
<li>
<p class="year">1985 - 1986</p>
<ion-icon class="arrow" name="arrow-forward-outline"></ion-icon>
<p class="text">Studien aufhenthalt....</p>
</li>
<li>
<p class="year">1985 - 1986</p>
<ion-icon class="arrow" name="arrow-forward-outline"></ion-icon>
<p class="text">Studien aufhenthalt....</p>
</li>
</ul>
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
