Bootstrap input-group-prepend/addon width adjustment - html

Question

I'm having issues making prepend add-ons the same width. I'm using Font Awesome icons and the prepend is sized to each specific icon. I found another thread from about a year ago describing my exact problem, but there wasn't an answer.
Bootstrap4 make all input-group-addons same width
Here's a screenshot of my issue:
I tried using various CSS tweaks with no luck, including the one provided in that aforementioned thread.
Relevant HTML:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row body-main-bg">
<div class="col-sm-4 my-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-user"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Name">
</div>
</div>
</div>
<div class="row body-main-bg">
<div class="col-sm-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-envelope"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Email">
</div>
</div>
</div>
<div class="row body-main-bg">
<div class="col-sm-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-ellipsis-v"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Subject">
</div>
</div>
</div>
<div class="row body-main-bg">
<div class="col-sm-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-pencil"></span>
</span>
</div>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Message"></textarea>
</div>
</div>
</div>

Answer 1

I tried your same code snippet, with just some css tweaks it works for me.
I just added the following css,
Please use this css, this will solve your prepend/addon width issue.
.input-group-text {
width: 40px;
}
.input-group-text span {
margin: 0 auto;
}
Here is also the url to the snippet as well,
bootstrap-input-group-prepend-addon-width-issue

Answer 2

I think the easiest answer with this is css grid.
.wrapper
{
display:grid;
grid-template-rows: repeat(3,1fr) 2fr;
grid-template-columns: 15% 85%;
grid-row-gap:1rem
}
Then assign icons to the first column and inputs to the second one.
Hope this answered your problem.

Answer 3

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="modal-body" id="m_cr_body">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend w-25">
<span class="input-group-text w-100" id="inputGroup-sizing-sm"><i class="fas fa-camera fa-fw"></i> Photographer</span>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend w-25">
<span class="input-group-text w-100" id="inputGroup-sizing-sm"><i class="fas fa-paint-brush fa-fw"></i> Edit</span>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend w-25">
<span class="input-group-text w-100" id="inputGroup-sizing-sm"><i class="fas fa-ruler-vertical fa-fw"></i> Rule</span>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
</div>
</div>