Mettre 2 formulaires cote à cote, problème ...

Bonjour tout le monde,
Gros débutant, je souhaiterai mettre deux formulaires cote à cote sur la même ligne mais sans succès jusqu'ici ....
Voici "mon code":

<link href="//cdn-images.mailchimp.com/embedcode/classic-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;  width:400px;}
#don {
  display : flex;
}
img {
  width: 400px;
}
</style>
<div id="mc_embed_signup">
<form action="https://hvm.us11.list-manage.com/subscribe/post?u=4b657f555e2eb9d81ada5f48d&amp;id=11d5f724e3" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll" style="background:#eee;border:1px solid #ccc;padding:5px 10px;">
<h2>Abonnez-vous à notre newsletter</h2>

<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>

<div class="mc-field-group"><label for="mce-EMAIL">Email Address <span class="asterisk">*</span> </label> <input class="required email" id="mce-EMAIL" name="EMAIL" type="email" value="" /></div>

<div class="clear" id="mce-responses">
<div class="response" id="mce-error-response" style="display:none">&nbsp;</div>

<div class="response" id="mce-success-response" style="display:none">&nbsp;</div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->

<div aria-hidden="true" style="position: absolute; left: -5000px;"><input name="b_4b657f555e2eb9d81ada5f48d_11d5f724e3" tabindex="-1" type="text" value="" /></div>

<div class="clear"><input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
<main id="don">
<div class="donne">
<fieldset><!-- Un deuxième formulaire qui permet de faire un don. Le type radio permet de cocher un case. Ou le type text pour remplir un montant particuler.  --><legend> Le montant que je donne </legend>

<p><input name="don" type="radio" value="10" /> 10€ <input name="don" type="radio" value="20" /> 20€ <input name="don" type="radio" value="50" /> 50€ <input name="don" type="radio" value="100" /> 100€<br />
<br />
Saisir un autre montant : <input name="don" type="text" value="" /></p>
</fieldset>

<fieldset><legend></legend><br />
&nbsp;</fieldset>
</div>
</main></div>
</form>
</div>

D'abord un premier formulaire "abonnez-vous" avec un bouton subscribe (gauche)
et ensuite un second formulaire "le montant que je donne" que je voudrais voir à droite sur la même ligne.

Si quelqu'un peut m'aider je lui en serai ultra reconnaissant !

Merci

Salut,

Regarde ceci : codepen
lectures complémentaires :
- Guide de survie du positionnement CSS
- CSS3 Flexbox Layout module