.circletop {
    position: absolute;
    top: -5px;
    left: -9px;
    color: #636363;
    /* background-color: brown; */
}
.circlebottom {
    position: absolute;
    bottom: -5px;
    left: -9px;
    color: #636363;
    background-color: #ffffff;
}
.toptext{
    position: relative;
    top: -10px;
    /* background-color: aqua; */
}
.bottomtext{
    position: relative;
    bottom: -10px;
    /* background-color: blueviolet; */
}
.border-left {
    border-left: 2px dashed #b8babb !important;
}

/*
    HTML EXAMPLE
*/
/*
<div class="col-12 border-left" style="min-height: 50px;">
    <div class="circletop"><i class="fas fa-circle"></i></div>
    <div class="toptext p-0">
        <p>
            <small class="poppins">Titik Naik</small>
            <br><span class="fs-14 poppins-bold">Pasteur,  Bandung</span>
        </p>
    </div>
    <div class="bottomtext p-0">
        <p>
            <small class="poppins">Titik Turun</small>
            <br><span class="fs-14 poppins-bold">Atrium Plaza, Jakarta</span>
        </p>
    </div>
    <div class="circlebottom"><i class="far fa-circle"></i></div>
</div>
*/