How to get email field and submit button on same line with embedded MailChimp form

Question

I have a WordPress website and I'm trying to add a MailChimp email sign up form to the footer of the site using a raw HTML widget with my theme's page builder.

I want the email field and the submit button to be on the same line and no matter what I try I can't seem to get this to work. I've tried a few solutions from this site and some others I found on Google but no luck.

Here's my form code, does anyone know what I need to add here to get the field and button on the same line?

<!-- Begin MailChimp Signup Form -->
<style type="text/css">
#mc_embed_signup{background:#1b1d1f; clear:left; font:14px   Helvetica,Arial,sans-serif; width:100%;}
/* 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="https://origami.us11.list-manage.com/subscribe/post?u=c46543dec276193775d525c9f&amp;id=85cb8a5e0e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">

<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your Best Email" required>
<!-- 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;" aria-hidden="true"><input type="text" name="b_c46543dec276193775d525c9f_85cb8a5e0e" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn border-width-0 btn-accent btn-round btn-flat btn-icon-left"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->

If it helps the site I'm working on is here: http://origamidotme.staging.wpengine.com the form is at the bottom of the site.

Thanks in advance for any help with this, it's driving me crazy.

Answer 1

The button is being used as a block level element and this is causing the problem. Please see below:

#mce-EMAIL {
   display:inline-block;
   float:left;
   margin: 6px 20px 0 0;
}

This will sit both buttons side by side.