Get button closer to input field - html

Question

I have an input and button on the same line but they sit far apart.
How can I bring them closer?
HTML
<form action="https://moneynest.us11.list-manage.com/subscribe/post?u=9ccf2d2219536b32eaae3c3d1&id=33b662ad0d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="input-group">
<input type="email" name="EMAIL" class="form-control" placeholder="Email address" id="mcinputform-front" required autofocus>
<span class="input-group-btn">
<button class="btn btn-default" type="submit" value="Subscribe" name="subscribe" onClick="ga('send', 'event', { eventCategory: 'SumoMe', eventAction: 'Conversion', eventLabel: 'CTA bottom email signup on bankrupt footballers page'})";>Subscribe!</button>
<input id="group_32" style="display: none;" checked="checked" name="group[12353][32]" type="checkbox" value="1" />
<input id="group_4194304" style="display: none;" checked="checked" name="group[12353][4194304]" type="checkbox" value="1" /><!-- 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
</span>
</div>
</form>
CSS:
#signupform-front {
background-color: lightgray;
padding-bottom: 1%;
}
#signupinput-front {
display: block;
text-align: center;
max-width: 50%;
}
#mcsignupbutton-front {
width: 10%;
text-align: center;
float: right;
}
#mcinputform-front {
max-width: 50%;
}
Check it here

Answer 1

Try adding the following CSS.
The top class will make the div they are contained in 100% then you can control the size of each element, reducing it will put it on one line for you. The last class will add spacing left of the button.
.input-group {
width: 100%;
}
.input-group .form-control {
width: 20%;
}
.btn-default {
margin-left: 2%
}