<div class="container">
        <div class="start"><div class="circle">1850</div></div>
        <div class="lineContainer">
            <div class="line"></div>
            <div class="bubble"></div>
            <div class="Time">1996-2002</div>
        </div>
        <div class="end"><div class="circle">2021</div></div>
    </div>
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: arial, sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container{
    position: relative;
    width: 900px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.container .start{
    margin-right: 0em;
}
.container .lineContainer{
    width: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
    position: relative;
    padding: 0;
}

.container .end{
    margin-left: 0em;
}

.container .lineContainer .line{
    position: relative;
    width: 100%;
    height: 3px;
    background: #000;
}

.container .lineContainer .bubble{
    width: 25px;
    height: 25px;
    background-color: #007bff;
    border-radius: 50%;
    position: absolute;
    top:50%;
    left:80%;
    transform:translateY(-50%);
}

.container .lineContainer .Time{
    position: absolute;
    top:-20px;
    left:80%;
    transform:translateX(-50%);
    background: #000;
    color: #FFF;
    border-radius: 6px;
    padding: 3px;
    font-size: 0.8em;
}

.circle{
    width: 60px;
    height: 60px;
    border-radius: 50px;
    background: #007bff;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.