How to extend border width in css?

Question

I have a stepper, in which the active step is highlighted in blue color.

Working Snippet:

.inline-flex {
  display: inline-block;
  border-bottom: 2px solid black;
  padding-left: 100px;
}

.inline-flex:first-child {
  padding-left: initial;
}

.active {
  border-bottom: 2px solid blue;
}

<div class="steps">
  <div class="inline-flex active">Registration</div>
  <div class="inline-flex active">Basic Information</div>
  <div class="inline-flex">Professional Information</div>
  <div class="inline-flex">Others</div>
</div>

To make the active indication, we are making it upto the current step title.

Requirement:

The requirement is that the progress bar should split up equally for 100% width.

In the above example there are 4 steps, So the active indication should be there for

-> 25% for Registration (If user is in Step 1)

-> 50% for Basic Information (If user is in Step 2)

I am trying to achieve it by using padding left and it only works until the title ends.

So kindly please help me to make the progress bar to split up for total width.

Expected Output:

Active in Step 1 Registration Step

Registration       Basic Information      Step 3
-------blue--------black------black-----black---

Answer 1

The easiest way to make the bars to have the same width is adapting their total percentage to a value less than 100%. For example:

.inline-flex {
  display: inline-block;
  border-bottom: 2px solid black;
  width: 24%;
}

When using the inline-block display, the html space and line count as a little percentage of the total width (html-css shenanigans...), so you could write the html like this:

<div class="steps">
  <div class="inline-flex active">Registration</div><div class="inline-flex active">Basic Information</div><div class="inline-flex">Professional Information</div><div class="inline-flex">Others</div>
</div>