JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <section>
      <div><span>sdf</span></div>
      <div><span>sdf</span></div> 
      <div><span>sdf</span></div>
      <div><span>sdf</span></div>
    </section>
  </div>

CSS

section {
  display: flex;
  display: -webkit-flex; 
  -webkit-justify-content: space-between;
  justify-content: space-between;
  position: relative;
  width: 100%;
}
.container {
  position: relative;
  width: 100%;
}
.container:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: black;
  margin-top: -1px;
  z-index: -1;
}

section > div {
  width: 50px;
  height: 50px;
  background: tomato;
  border-radius: 50%;
  display: flex;
  display: -webkit-flex; 
  align-items: center;
  
-webkit-align-items: center;
  justify-content: center;
   -webkit-justify-content: center;
}

span {
  margin-top: 100px
}