Alignment issue while creating vertical stepper html css - html

Question

I am creating a simple vertical stepper component with html & css. And trying to design like this. I strucked in the css part some alignment issues are coming.
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>
.
From the output i want the numbers 1 and 2 inside the circle and label text should align next to the circle. I don't know how to achieve this. Ur suggestions are helpful.

Answer 1

Is this how you want it? added the :before css to span added display: inline-block; to .step-vertical to bring it next to the span.
.steps-container .step {
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;
padding: 5px 10px;
color: black;
vertical-align: top;
}
.steps-container .step.active::before {
background-color: green;
}
.step-vertical {
border-left: 1px solid #e1e1e1;
margin-bottom: 5px;
margin-left: 5px;
height:200px
}
h5{margin-top: 5px;
display: inline-block;}
button{
display:block
}
.ml-2{
margin-left:10px
}
<div>
<div class="steps-container">
<span class="step inactive">1</span>
<h5 class="text-grey">label text 1</h5>
<div class="step-vertical">
<div>
<textarea class="ml-2" name="" id="" cols="30" rows="10">
</textarea>
<button class="ml-2">Continue</button>
</div>
</div>
</div>
<div class="steps-container">
<span class="step inactive">2</span>
<h5 class="text-grey">label text 2</h5>
<div class="step-vertical">
<div>
<textarea class="ml-2" name="" id="" cols="30" rows="10"> </textarea>
<button class="ml-2">Continue</button>
</div>
</div>
</div>
</div>