Aligning text beside a radio/checkbox in HTML

Issue

There is some padding from the top to the Keep me logged in text.

How can I remove the padding and make it look like this ?

HTML:

<div class="login-radio">
<input type="radio">Keep me logged in
</div>

CSS:

.login-radio {  
font-size: 12px;
position: fixed;
left:60%;
top: 7%;
color: white;
font-family: arial;   
}

Solution

Try this:

HTML:

<div>

  <div class="email">
     <input type="email" />
  </div>

  <div class="checkbox">
      <input type="checkbox" />
      <span>Keep me logged in</span>
  </div>

</div>

CSS:

.email input {
float: left;
margin-top: 5px;
margin-left: 5px;
font-family: arial, sans-serif;
font-size: 12px;
outline: none;
}

.checkbox input {
float: left;
margin-top: 10px;
margin-left: 5px;                                      
color: #000;
clear: both;
}

.checkbox span {
float: left;
margin-top: 7px;
margin-left: 2px;
font-family: arial, sans-serif;
}

Here's the fiddle.

Regards, Milan.

Answered By - user3187075