html - サイズ変更時にフォーム btn が移動する CSS の問題

Question

関連するフォーム入力の右側にフォーム btn を配置するのに少し苦労しています。ブラウザが適切なサイズの場合は問題ありませんが、ブラウザが縮小されると、このボタンは左に留まらず、入力の下の行に移動します。考えられることはほとんどすべて試しましたが、ウィンドウが縮小されたときに動くのを止めることはできません。

どんな助けでも大歓迎です。

CSSは次のとおりです。

#footer-newsletter form {
display: block;
vertical-align: baseline;
}
#footer-newsletter input {
display: inline;
width: 231px;
height: 19px;
background: #202020;
border:0;
margin:0;
padding:10px;
color: #A5A5A5;
font-size: 0.85em;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;    
-webkit-transition:background .3s ease-in-out;
-moz-transition:background .3s ease-in-out;
transition:background .3s ease-in-out;
float:left;
border-radius:0
}
#footer-newsletter button {
display: inline;
width:39px;
float:right;
height:39px;
text-indent:-9999em;
background:#202020 url(images/newsletter_arrow.png) no-repeat center center;
border:0;
margin-left:1px;
-webkit-transition:background .3s ease-in-out;
-moz-transition:background .3s ease-in-out;
transition:background .3s ease-in-out;
}

html は次のとおりです。

<!-- BEGIN .four columns right #footer-newsletter -->
    <div class="four columns right" id="footer-newsletter">
        <h3>Newsletter</h3>
    <p>Occasional email updates, no spam</p>
    <form id="newsletter" method="post" action="http://innervisionsoftware.co.uk/wp-content/plugins/newsletter/do/subscribe.php" onsubmit="return newsletter_check(this)">
        <input id="email" type="email" name="newsletter" value="Your email address" required>
        <button type="submit">Submit</button>
    </form>
    </div>
    <!-- END .four columns right #footer-newsletter -->

コンテナーは、100% である大きいコンテナーの幅のパーセンテージにすぎません。

私は通常、この質問のためにこのコードをライブサイトに配置しますが、このネットワークから通常のサイトにアクセスできないため、申し訳ありません.

どんな助けでも大歓迎です。