I am struggling to align two form boxes on the same line and another one below them. Despite my attempts with divs, I cannot seem to separate these two fields. I even tried inserting the character between them, but to no avail.
Below is the snippet of my HTML code:
<div class="form-line">
<input class="input-text" id="name-box" type="text" name="name" value="Name">
<input class="input-text" id="mail-box" type="text" name="mail" value="Email">
</div>
Here is the CSS styling:
.input-text {
padding-left: 3px;
font-family: sans-serif;
}
.input {
display: inline;
}
.form-line {
padding-top: 5px;
clear:both;
}
#name-box {
float: left;
}
#mail-box {
float: left;
}
Could you please provide me with a solution on how to add 10px of space between these boxes? Thank you.