Bootstrap 4: Ensure last column does not jump to second row

Question

I have the below html which uses bootstrap 4 on my page

<div class="container">
    <div class="row">           
        <div class="col-xs-11" style="padding: 0 !important;">
            <input type="text" class="form-control" placeholder="Type your Message Here">
        </div>      
        <div class="col-xs-1" style="padding: 0 !important;">
            <button class="btn btn-small btn-primary">Send</button>
        </div>          
    </div>
</div>

This renders as expected when I shrink my chrome window to emulate a small screen device (See screenshot below)

Now I want to cater to desktop web browsers also. So I add the col-lg-11 and col-lg-1 classes as follows

<div class="container">
    <div class="row">           
        <div class="col-xs-11 col-lg-11" style="padding: 0 !important;">
            <input type="text" class="form-control" placeholder="Type your Message Here">
        </div>      
        <div class="col-xs-1 col-lg-1" style="padding: 0 !important;">
            <button class="btn btn-small btn-primary">Send</button>
        </div>          
    </div>
</div>

But now when I shrink chrome, the button jumps to the second row. (See screenshot below)

How do I still keep both in a single row for both desktop and small devices?

Plunker: https://plnkr.co/edit/a9ZCCyTrS1wUcb4Gdbf4?p=preview