MailChimp Form and Button in the same line - css

Question

On my MailChimp form I would like to have the form and submit the button inline with one another.
I have been trying several different variations of float and display but none of them have the desired effect.
Here is the original code. Anyone have any suggestions on how to align the form and the button?
#mc_embed_signup .button {
clear: both;
background-color: #aaa;
border: 0 none;
border-radius: 4px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: bold;
height: 32px;
line-height: 32px;
margin: 10px 0px 10px 0;
padding: 0 22px;
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
width: auto;
}
#mc_embed_signup .mc-field-group input {
display: block;
width: 100%;
padding: 8px 0;
text-indent: 2%;
}
#mc_embed_signup input.mce_inline_error {
border-color: #6B0505;
}
#mc_embed_signup input {
border: 1px solid #999;
-webkit-appearance: none;
}
#mc_embed_signup .mc-field-group label {
display: block;
margin-bottom: 3px;
}
<!-- Begin MailChimp Signup Form -->
<style type="text/css">
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Addresse </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="name#domain.de">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
<div class="clear text-center"><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->

Answer 1

In newsletter is recommended use "old style" code, with <table> and inline style. If you use table can have the form next to each other and it will be compatible on most devices.
Live example on the jsFiddle
button {
clear: both;
background-color: #aaa;
border: 0 none;
border-radius: 4px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: bold;
height: 32px;
line-height: 32px;
margin: 10px 0px 10px 0;
padding: 0 22px;
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
width: auto;
}
input {
display: block;
width: 100%;
padding: 8px 0;
text-indent: 2%;
}
<table>
<tr>
<td><input type="text" placeholder="name#name.com" /></td>
<td><button>Send</button></td>
</tr>
</table>

Answer 2

I made some changes to your code for inline elements:
#mc_embed_signup .button {
clear: both;
background-color: #aaa;
border: 0 none;
border-radius: 4px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: bold;
height: 32px;
line-height: 32px;
/*margin: 10px 0px 10px 0;*/
/*padding: 0 22px;*/
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
/*width: auto;*/
}
#mc_embed_signup .mc-field-group input {
/*display: block;*/
/*width: 100%;*/
/*padding: 8px 0;*/
text-indent: 2%;
}
#mc_embed_signup input.mce_inline_error {
border-color: #6B0505;
}
#mc_embed_signup input {
border: 1px solid #999;
-webkit-appearance: none;
}
#mc_embed_signup .mc-field-group label {
display: block;
margin-bottom: 3px;
}
#mce-EMAIL{
padding: 8px 0;
display: inline-block;
width: 70%;
}
#mc-embedded-subscribe{
display: inline-block;
width: 20%;
margin: 0;
padding: 0;
}
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Addresse </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="name#domain.de">
<input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
<div class="clear text-center"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
http://jsfiddle.net/mitsuru/3Lusbvjx/1/
You should put the submit input near the email from input, then "inline-block" and "width" in % do the magic.
It doesn't use tables, !importants, nor needs to fix or apply tricks. It's just CSS.
Cheers.