Why this works

By using a vertical line as the timeline and positioning dots and content absolutely, we create a simple and clear visualization of milestones without needing JavaScript.

Source Code

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">Started Project</div>
  </div>
  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">First Release</div>
  </div>
  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">Major Update</div>
  </div>
</div>

<style>
.timeline {
  position: relative;
  margin: 2rem auto;
  padding: 2rem 0;
  width: 2px;
  background: #dee2e6;
}
.timeline-item {
  position: relative;
  margin-bottom: 4rem;
  text-align: left;
}
.timeline-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: #0d6efd;
  border-radius: 50%;
  z-index: 1;
}
.timeline-content {
  position: absolute;
  top: 50%;
  left: 2rem;
  transform: translateY(-50%);
  background: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-weight: 500;
}
</style>