How to apply border for text in css?

Question

Here I have a div with steps as Step 1, Step 2, Step 3 in which Step 1 contains active class so it will have the blue border.

Working Snippet:

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

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

<div class="inline-flex active">Registration</div>
<div class="inline-flex">User</div>
<div class="inline-flex">Professional Information</div>

Requirement:

Here the blue border needs to be applied to only the text Step 1 and not to its entire width of 20%.

Expected Output:

Step 1             Step 2           Step 3
-blue- ---black----black continues--------

I have tried applying position: absolute; to the .active class but it doesn't work as intended.

Kindly please help me to apply border-bottom: 2px solid blue only to the text and not the entire width of the div element.

Answer 1

You can give justify-content: flex-end to .inline-flex, then reset the width of the first element to initial:

Edit

If you want the spaces between the texts are equal, use a fixed padding-left instead give them width:

.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">User</div>
  <div class="inline-flex">Professional Information</div>
</div>