営業時間のラベルから二つ目の時間入力までの要素を画面が小さくなっても横一列にしたいと思っていますが上手くいきません。画面を小さくすると、ラベルと入力のテキストボックスが縦に並んでしまいます。どう修正したらいいのか教えていただいてもよろしいでしょうか。
【コード】

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>あいうえお商店</title>

        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/bootstrap-timepicker.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
    </head>
    <body>
        <div class="container">
            <p>あいうえお商店</p>
            <p>住所：東京都千代田区</p>
            <form class="form-inline">
                <div class="form-group">
                    <label class="control-label" for="businesshours">営業時間：</label>
                    <div class="input-group bootstrap-timepicker timepicker" style="width:110px">
                        <input type="text" id="businesshours" class="form-control input-small timepicker1">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                    </div> ～
                    <div class="input-group bootstrap-timepicker timepicker" style="width:110px">
                        <input type="text" class="form-control input-small timepicker1">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                    </div>
                </div>
            </form>
        </div>
        <script type="text/javascript">
            $('.timepicker1').timepicker({
                showMeridian: false
            });
        </script>
    </body>
</html>