<div class="stepper-wrapper">
  <ul class="step-wrapper" >
    <li class="step__bubble"></li>
    <li class="step__circle"></li>
  </ul>
  <ul class="step-wrapper" >
    <li class="step__bubble"></li>
    <li class="step__circle"></li>
  </ul>
</div>

.stepper-wrapper {
  display: flex;
  flex-direction: row;
}
ul {
  border: 1px solid grey;
  height: 0px;
  position: relative;
  top: 40%;
  min-width: 100px;
  flex: 1;
  li.step__bubble {
    display: inline-block;
    vertical-align: middle;
  }
  li.step__bubble::before {
    content: "";
    position: absolute;
    top: -9px;
    left: calc(50%);
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid grey;
    border-radius: 50%;
    background: white;
  }
  li.step__circle {
    width: 8px;
    height: 8px;
    border: 1px solid red;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: -4px;
    left: calc(50% + 1px);
  }
}