CSSのみを使用して、DIVのテキストボックスを使ってRecaptchaとSendボタンを整列させますか？

Question

私の送信ボタンとrecaptchaを連絡先フォームのテキストボックスの最後に合わせるのが難しいですか？私は数日間このことをぶち壊しているだけで、それを整列させることはできません。ここに私のjsfiddleは次のとおりです。 Example

私の現在のCSSは次のとおりです。

/*custom css*/ 
#gkBottom6 { 
    background-color:#4c90fe; 
} 
#hdr-lay { 
    background-color: #4c90fe; 
} 

#container { 
    background-color: #4c90fe; 
    height:100%; 
    width:100%; 
} 


#left-column { 
    float: left; 
    background-color: #4c90fe; 
    border: 1px; 
    width: 65%; 
    height:inherit; 

} 
#right-column { 
    float: left; 
    width: 35%; 
    background-color: #4c90fe; 
    display: block; 
    height:inherit; 
    color:#fff; 
} 
#left-column > h3 { 
    color:#fff; 
} 
#right-column > h3 { 
    color:#fff; 
} 

/*Button Styling on contact form*/ 
.gkContactForm .button-border { 
    background: #fff; 
    border: 2px solid #fff; 
    color: #4c90fe; 
    float: right; 
    height: 50px; 
    line-height: 47px; 
    margin: 18px 0 0 0; 
    padding: 0 32px; 
    width: auto!important; 
    clear:both; 
} 
.gkContactForm .button-border:active, 
.gkContactForm .button-border:focus, 
.gkContactForm .button-border:hover { 
    background: #fec54d; 
    border-color: #fec54d; 
    color: #fff; 
} 
/*Input area*/ 
.gkContactForm p.gkcontact-fields { 
    float: left; 
    margin: 0 7% 0 0; 
    width: 44%; 
} 
.gkContactForm p.gkcontact-textarea { 
    float: right; 
    margin: 0; 
    width: 49%; 
} 
.gkContactForm input { 
    border-color: #4c90fe; 
    margin: 0 0 12px 0; 
    width: 100%; 
} 
.gkContactForm textarea { 
    border-color: #4c90fe; 
    height: 159px!important; 
} 
/*Recapcha*/ 
.gkContactForm #dynamic_recaptcha_1 { 
    float: right; 
    margin-top:12px; 
} 

私はちょうどこれらのテキスト入力ボックスの端に合わせ滞在したいです。私はしばらくの間このサークルでラウンドしてきたので、どんな助けでも大歓迎です。

.gkContactForm textarea{ 
    float:right; 
} 

そこからあなたが＃に左の列を与えたいと思うことがあります。あなたが含まれている要素は、右浮かべ、それに加えて、あなたがグラグラテキストエリア自体をフロートする必要がある必要があり

よろしく ドナ

Answer 1

それらはすべて今すぐ他の列に正確に整列するため、いくつかのパディングがあります。