Bootstrap: [v4b3][input-group] Middle text between two form-control become ugly

[Safirion]

Before the b3 we can do this with simple html code :

<div class="input-group input-group-sm">
        <input class="form-control form-control-sm" type="text">
        <div class="input-group-addon">@</div>
        <select class="form-control form-control-sm"></select>
</div>

But now, we have to do that :

<div class="input-group input-group-sm">
       <div class="input-group-prepend">
                <input  class="form-control form-control-sm input-group-prepend" type="text">
                <div class="input-group-text">@</div>
        </div>
        <select  class="form-control"></select>
</div>

It's become less readable. So have I miss something or the beta 3 input-group are now less easy to use ?

Note that if I don't put "form-control-sm" in the first input, the "input-group-sm" is not take in account. Seem's to be a bug if I refere to the input-group doc.

[alecpl]

Assign both input-group-prepend and input-group-append to the addon element. There's a ticket for this.

[Safirion]

Effectively, this html code work fine and is more clean :

<div class="input-group input-group-sm">
                <input class="form-control" type="text">
                <div class="input-group-prepend input-group-append">
                    <div class="input-group-text">@</div>
                </div>
                <select class="form-control"></select>
            </div>

Thank you for your reply alecpl 👍