How can I set the spacing between input elements in CSS? - html

Question

How can I make the Email and Password fields separated by the exact height of their icons? I tried using line-height but it only seems to work on text.
Of course I could simply look at the height of the icon in Firefox's Web Inspector and then say margin-bottom: xx px, but is that really the best way to do it?
My code looks like this:
<form class="signup-field">
<h1>Enter your email to start.</h1>
<h2>Choose a strong password.</h2>
<div class="input-group">
<span class="input-group-addon"></span>
<input type="text" class="form-control" placeholder="Email" /><br />
</div>
<div class="input-group">
<span class="input-group-addon"></span>
<input type="password" class="form-control" placeholder="Password" /><br />
</div>
<div class="input-group t-c-submit">
<input type="checkbox">I agree to the terms and conditions.
<button type="button" class="button">Get Started</button>
</div>
</form>
and my CSS looks like this:
#font-face {
font-family: "simple-line";
src: url("simple-line-icons-24.woff") format('woff');
}
.container {
max-width: 880px;
}
.signup {
background-color: #48b7d6;
color: #fff;
font-family: Montserrat;
}
.signup h1 {
font-size: 3.2em;
}
.signup h2 {
font-size: 1.188em;
}
.signup-field input {
background: none;
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted #dce3e7;
margin: 10px;
color: #fff;
}
.signup-field input::placeholder {
color: #fff;
}
.signup-field button {
float:right;
font-size: 1.188em;
background: none;
color: #fff;
border: 1px solid #dce3e7;
margin: 12px;
min-width: 140px
}
.signup-field button:hover {
background-color: #2fa1ba;
}
.signup-field .input-group-addon {
font-family: simple-line;
font-size: 1.188em;
border: 1px solid #dce3e7;
background: none;
border-radius: 0;
color: #fff;
}
/* Bootstrap overrides (also the above 3 lines) */
.input-group {
width: 100%;
line-height: 200%;
}