I'm currently working on developing a vertical stepper component using html & css with inspiration from this design. However, I've encountered some alignment issues in the css that I'm struggling to resolve.
CSS
.steps-container .step::before {
display: inline-block;
content: "";
font-size: 10px;
color: #fff;
text-align: center;
background-color: #e1e1e1;
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
right: 4px;
top: 2px;
}
.steps-container .step.active::before {
background-color: green;
}
.step-vertical {
border-left: 1px solid #e1e1e1;
margin-bottom: 5px;
margin-left: 5px;
}
HTML
<div>
<div class="steps-container">
<span class="step inactive">1</span>
<div class="step-vertical">
<div>
<h5 class="text-grey">label text 1</h5>
<button>Continue</button>
</div>
</div>
</div>
<div class="steps-container">
<span class="step active">2</span>
<div class="step-vertical">
<div>
<h5 class="text-grey">label text 2</h5>
<button>Continue</button>
</div>
</div>
</div>
</div>
.
My desired output includes having the numbers 1 and 2 inside the circle and aligning the label text next to each circle. Any suggestions on how to achieve this would be greatly appreciated.