I am having a problem, when this is shown full screen it looks how it is suppose too. But as I start scaling down in size once I get to mobile the first form group exands the form all the way across and bumps down the second form group to a new line. 

I want both form groups in the same line even when I scale down to mobile view

```
         <div class = "container col-xs-12 col-sm-6 col-lg-5 center-block">
            <form class="form-inline">

             <div class="form-group">

                <label>Start:</label>
                <input type="text" class="form-control" placeholder="{{ start_length }}" id="bar">

             </div>
             <div class="form-group pull-right">

                <label>End: </label>
                <input type="text" class="form-control" placeholder="{{ end_length }}" id="bar1">

             </div>

            </form>
         </div>

```

[jsfiddle](http://jsfiddle.net/vg4Lxxrx/)