How to create a css vertical line with circles and text on side in reactjs?

Question

Hi I have been trying to create something as showing in the image below but I do not know if my way of doing is correct or not, if not could you please correct me.

Thanks

please see the code I have tried:

<Box className="education-details">
                            <div className="circle"> </div>
                            <div className="not-circle">
                                <p className="education-degree">masters</p>
                                <p className="education-year"> 2017/2019</p>
                                <p className="education-location">Dublin business school</p>
                            </div>
                            <div className="circle"> </div>
                            <div className="not-circle">
                                <p className="education-degree">masters</p>
                                <p className="education-year"> 2017/2019</p>
                                <p className="education-location">Dublin business school</p>
                            </div>
                            <div className="circle"> </div>
                            <div className="not-circle">
                                <p className="education-degree">masters</p>
                                <p className="education-year"> 2017/2019</p>
                                <p className="education-location">Dublin business school</p>
                            </div>
                        </Box>

the CSS part

    .education-details {
    box-sizing: border-box;
}

.circle {
    width: 17px;
    height: 17px;
    background-color: rgb(255, 0, 0);
    border-radius: 50%;
    margin-left: -1.75%;
    position: absolute;
}

.not-circle {
    /* margin-top: -30px;
    margin-left: 1.5vw; */
}

The result

codesand box link

Answer 1

Finally, as your question was quite interesting, I played with codepen.io to create something similar to your original picture. I reduced a bit the HTML content like I mentionned in my comment as I prefer using pseudo-elements when possible for graphical concerns.

The HTML sementic could be improved by the use of <section>, <ul> and <li> elements also. In my proof of concept I just used <div> elements. I also prefered using <h2>, <h3> and <time> tags instead of ordinary <p> tags.

You can play with my codepen here: https://codepen.io/patacra/pen/wvperjL

You can see it here after SCSS was compiled to CSS:

html, body {
  margin: 0;
  position: relative;
}

html {
  background-color: #f6f6f6;
}
html::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background-color: #ffebeb;
  top: 8em;
  right: -8em;
  width: 15em;
  height: 15em;
}

body {
  padding: 1em;
  font-family: Arial, sans serif;
  font-size: 14px;
}
body::before, body::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background-color: #ffebeb;
}
body::before {
  top: -10em;
  left: -15em;
  width: 25em;
  height: 30em;
}
body::after {
  top: -12em;
  right: -12em;
  width: 25em;
  height: 25em;
}

.timelines {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.timeline-title {
  font-size: 1em;
  font-weight: bold;
}

.timeline-item {
  margin-bottom: 2em;
}
.timeline-item h3 {
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0;
  position: relative;
}
.timeline-item h3::before {
  content: "";
  position: absolute;
  left: -2.35em;
  background-color: #fe4747;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  transform: translate(-0.5px, 0.2em);
}

.timeline-items {
  margin: 2em;
  padding: 0.01em 0 3em 2em;
  border-left: 1px solid #fe4747;
}

.timeline-item {
  margin-top: -0.3em;
}
.timeline-item time {
  display: block;
  float: left;
  background-color: #ffebeb;
  padding: 0.2em 0.4em;
}
.timeline-item > * {
  margin: 1em 0;
}
.timeline-item .location {
  clear: both;
  font-size: 0.85em;
  font-style: italic;
}

<div class="timelines">
  
  <div class="timeline education">
    <h2 class="timeline-title">Education</h2>
    <div class="timeline-items">
      <div class="timeline-item">
        <h3>Master of Science in information systems with computing</h3>
        <time datetime="2017/2019">2017 &ndash; 2019</time>
        <div class="location">Dublin Business School, Dublin, Ireland</div>
      </div>
      <div class="timeline-item">
        <h3>Bachelor of electrical engineering</h3>
        <time datetime="2011/2016">2011 &ndash; 2016</time>
        <div class="location">North Maharashtra University, Jalgaon, India</div>
      </div>
      <div class="timeline-item">
        <h3>Boys town public school</h3>
        <time datetime="2009/2010">2009 &ndash; 2010</time>
        <div class="location">Dublin Business School, Dublin, Ireland</div>
      </div>
    </div>
  </div>
  
  <div class="timeline experience">
    <h2 class="timeline-title">Experience</h2>
    <div class="timeline-items">
      <div class="timeline-item">
        <h3>Sofware developer</h3>
        <time datetime="2020/2022">2020 &ndash; Present</time>
        <div class="location">Kare, Newbridge, Ireland</div>
      </div>
      <div class="timeline-item">
        <h3>Junior developer</h3>
        <time datetime="2019/2020">2017 &ndash; 2019</time>
        <div class="location">Unipupil limited, Dublin, Ireland</div>
      </div>
      <div class="timeline-item">
        <h3>Junior developer</h3>
        <time datetime="2015/2017">2017 &ndash; 2019</time>
        <div class="location">Dublin Business School, Dublin, Ireland</div>
      </div>
    </div>
  </div>
  
</div>