Trying to align input field with labels - html

Question

I want to align the input fields shown below, with keep using <label> in a correct way.
The code is as below:
<form action="add.php" method="POST" enctype="multipart/form-data">
<label for="refNo">Field1 name (long)</label>
<input id="refNo" type="text" name="refNo" value="" /><br>
<label for="name">Field2 name</label>
<input id="name" type="text" name="name" value="" /><br>
<input type="submit" value=":: Add ::" name="addBtn" />
</form>
I am thinking to separate <label> tags in a <div> and the input fields in another and then with some floating manipulation I make the intended alignment, is this a correct way?

Answer 1

How about this
form > label {
min-width: 185px;
display: inline-block;
}
<form action="add.php" method="POST" enctype="multipart/form-data">
<label for="refNo">Field1 name (long)</label>
<input id="refNo" type="text" name="refNo" value="" /><br>
<label for="name">Field2 name</label>
<input id="name" type="text" name="name" value="" /><br>
<input type="submit" value=":: Add ::" name="addBtn" />
</form>

Answer 2

<style>
form{
width: 300px;
float: left;
}
form > label{
width: 50%;
float: left;
margin-bottom: 10px;
}
form > input{
float: right;
width: 50%;
margin-bottom: 10px;
}
</style>
<form action="add.php" method="POST" enctype="multipart/form-data">
<label for="refNo">Field1 name (long)</label>
<input id="refNo" type="text" name="refNo" value="" /><br>
<label for="name">Field2 name</label>
<input id="name" type="text" name="name" value="" /><br>
<input type="submit" value=":: Add ::" name="addBtn" />
</form>

Answer 3

For simple UI use this (Using Table):
<form action="add.php" method="POST" enctype="multipart/form-data">
<table>
<tr>
<td>
<label for="refNo">Field1 name (long)</label>
</td>
<td>
<input id="refNo" type="text" name="refNo" value="" />
</td>
</tr>
<tr>
<td>
<label for="name">Field2 name</label>
</td>
<td>
<input id="name" type="text" name="name" value="" /><br>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value=":: Add ::" name="addBtn" />
</td>
</tr>
</table>
</form>
For More good looking and advanced UI try using Bootstrap.