Building a form stepper component, where the step titles can be different lengths, however the step buttons themselves should be constant length. A bit like this one from Material UI:
I had tried using relative and absolute postitioning and negative margins to try to get the dash in between the steps a constant distance from the circles, but to no avail. Not sure how to achieve this with flexboxes, since they dont seem to like to mesh together. Furthermore I am rendering the steps in a loop (v-for). My initial idea was to render the dash, position it to the right place, adn render the next component, but the dash causes the next component to render with a further space. Barebones sample of my code, as my current implementation is quite far from my initial idea.
<!DOCTYPE html>
<html>
<body>
<div class="form-stepper">
<div class="step-component">
<div class="button"></div>
<div class="text">Step1</div>
</div>
<div class="dash"></div>
<div class="step-component">
<div class="button"></div>
<div class="text">Step2</div>
</div>
<div class="dash"></div>
<div class="step-component">
<div class="button"></div>
<div class="text">Step3</div>
</div>
<div class="dash"></div>
</div>
</body>
<style>
.form-stepper {
display: flex;
flex-direction: rows;
align-items: center;
}
.step-component {
display: flex;
flex-direction: column;
}
.button {
height: 25px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.dash {
width: 60px;
height: 5px;
background-color: #bbb;
}
</style>
</html>