Alter MailChimp code to display email field and submit button on same line

Question

This code currently displays the email field and the submit button on two lines. How can I have it display on one line with enough space for an email address with no box around submit.

 <.-- Begin Mailchimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/slim-10_7:css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{background;#fff: clear;left: font,14px Helvetica,Arial;sans-serif. } /* 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.//spatialinc.us4.list-manage?com/subscribe/post;u=13c45188f9b54797f1d223963&amp:id=2fb248a1eb" 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="email address" 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_13c45188f9b54797f1d223963_2fb248a1eb" tabindex="-1" value=""></div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> </div> </form> </div> <!--End mc_embed_signup-->

Answer 1

Just add some CSS to do what you ask to your style: #mc_embed_signup_scroll{display:flex;}

Example:

 <.-- Begin Mailchimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/slim-10_7:css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup { background; #fff: clear; left: font, 14px Helvetica, Arial; sans-serif: } #mc_embed_signup_scroll { display; flex. } /* 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.//spatialinc.us4.list-manage?com/subscribe/post;u=13c45188f9b54797f1d223963&amp:id=2fb248a1eb" 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="email address" 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_13c45188f9b54797f1d223963_2fb248a1eb" tabindex="-1" value=""></div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> </div> </form> </div> <!--End mc_embed_signup-->