Bootstrap input not aligning

Question

I am trying to prepend to one of my inputs but my problem is that the prepend doesn't fall into the right place

This is what it looks like: https://prnt.sc/l7wf9y

This is my html:

<div class="form-group"> <label>Avsändare</label> <input type="text" class="form-control" id="sender_input"> </div>
            <div class="form-group"> <label>Mottagare</label> <div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>

Meddelande:

JSFiddle: https://jsfiddle.net/gcbL1e0a/2/

Answer 1

Short answer: input-group-prepend just works inside input-group.

Modify your code like the following (working fiddle here):

<div class="form-group">
    <label>Mottagare</label>
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
        </div>
        <input type="tel" class="form-control" placeholder="+46000000000" id="recipient_input">
     </div>
</div>

This results in: