Put the one box down exactly to the other - html

Question

In html I have this form:
<form action="index.php" method="GET">
Name <input type="text" name="FirstName" size="10" /><br />
<br />
Surname: <input type="text" name="LastName" size="10" /><br />
<br />
</form>
It is a for with the first and last name. Is it possible to make the one box to be exactly down to the other. Because the first box is closer to name because it has less letters than the surname and respectively it takes the space?

Answer 1

Without using CSS simplest way to do this, is using Table of HTML.
Consider this Snippet:
<form action="index.php" method="GET">
<table>
<tr>
<td>Name </td>
<td>
<input type="text" name="FirstName" size="10" />
<br />
</td>
</tr>
<tr>
<td>Surname:</td>
<td>
<input type="text" name="LastName" size="10" />
</td>
</tr>
</table>
</form>

Answer 2

here's one way you could do it.
input{position:absolute;left:80px;}
<form action="index.php" method="GET">
<label>Name</label> <input type="text" name="FirstName" size="10" />
<br><br>
<label>Surname:</label> <input type="text" name="LastName" size="10" />
</form>

Answer 3

HTML:
<form action="index.php" method="GET">
<label>Name:</label><input type="text" name="FirstName" size="10" /><br />
<br />
<label>Surname:</label> <input type="text" name="LastName" size="10" /><br />
<br />
</form>
CSS:
label{
display: inline-block;
float: left;
clear: left;
width: 150px;
text-align: right;
}
input {
display: inline-block;
float: left;
}
Fiddle:http://jsfiddle.net/4ncwzLpx/

Answer 4

First, you should improve your HTML. <br /> are ugly and you should associate the text with the inputs using labels:
<form action="index.php" method="GET">
<label>
Name: <input type="text" name="FirstName" size="10" />
</label>
<label>
Surname: <input type="text" name="LastName" size="10" />
</label>
</form>
Now, you can try displaying the form as a table:
form {
display: table;
}
label{
display: table-row;
}
form {
display: table;
}
label{
display: table-row;
}
<form action="index.php" method="GET">
<label>
Name: <input type="text" name="FirstName" size="10" />
</label>
<label>
Surname: <input type="text" name="LastName" size="10" />
</label>
</form>
And now, to align the inputs,
You can align the content to the right:
label {
text-align: right;
}
form {
display: table;
}
label{
display: table-row;
text-align: right;
}
<form action="index.php" method="GET">
<label>
Name: <input type="text" name="FirstName" size="10" />
</label>
<label>
Surname: <input type="text" name="LastName" size="10" />
</label>
</form>
Or, if you want the text aligned to the left, you can float the inputs to the right:
input {
float: right;
}
form {
display: table;
}
label{
display: table-row;
}
input {
float: right;
}
<form action="index.php" method="GET">
<label>
Name: <input type="text" name="FirstName" size="10" />
</label>
<label>
Surname: <input type="text" name="LastName" size="10" />
</label>
</form>