Issue on layout using b-form-invalid-feedback with b-input-group-addon

[mateusc-ciandt]

I'm trying to apply validation on my form:

<b-form-group>
<b-input-group>
    <b-input-group-addon class="input-group-append">
    <span class="input-group-text"><i class="icon-user"></i></span>
    </b-input-group-addon>
    <b-form-input type="text" 
                placeholder="Username"
                :state="nameState"
                aria-describedby="inputLiveFeedback"></b-form-input>
    <b-form-invalid-feedback id="inputLiveFeedback">
    Enter at least 3 letters
    </b-form-invalid-feedback>
</b-input-group>
</b-form-group>

But for some reason the layout is broken. I can't use b-form-invalid-feedback and b-input-group-addon together. I searched for a solution but found nothing.

I tried to put b-form-invalid-feedback out of b-input-group but it did not solve the problem, b-form-invalid-feedback no longer appears on the page.

[mosinve]

Hi, @mateusc-ciandt
Check this out https://jsfiddle.net/cihkem/1upornhj/. Is it solve your issue?

[mosinve]

Closed due to inactivity.
Feel free to open if needed.