Getting left of my input fields all the same size - html

Question

Hi I have a few input fields, they have a left and right side where the left is just a label and the right is the data.
However the left sides of the fields are all different sizes depending on the text in it. I want to have the width the same for all and the text aligned to the left.
Here is what I have:
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">hdsfkjdhf</span>
</div>
<input type="text" class="form-control" placeholder="Loading" value="{{person?.name}}" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">sdf</span>
</div>
<input type="text" class="form-control" placeholder="Loading" value="{{person?.age}}" aria-label="Age" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Other Stuff</span>
</div>
<input type="text" class="form-control" placeholder="Loading" value="{{person?.otherStuff}}" aria-label="Stuff" aria-describedby="basic-addon1">
</div>
Also I am using bootstrap 4

Answer 1

If you really want to use input-groups, you can add a little CSS to control the width of each .input-group-prepend...
https://codeply.com/go/wv5NMmTgwq
.input-group>.input-group-prepend {
flex: 0 0 20%;
}
.input-group .input-group-text {
width: 100%;
}
An alternate option is to use custom borders with form grid layout like this...
<div class="form-group row border rounded">
<label class="col-sm-2 col-form-label bg-light border-right border-bottom">Labelhere</label>
<div class="col-sm-10 border-bottom">
<input type="text" class="form-control border-0" id="input">
</div>
</div>
Demo of both options