Aligning textboxes in HTML - html

Question

I've been trying to align the textboxes but i can't seem to get it right. i also tried to google it but i can't figure it out.
<form name="salary" id="salary">
<b> <tr>
Name: <input type="text"> <br>
Sales: <input type="text" name="sales" id="sales"> </td>
<br> <br> <br>
Commission: <input type="text" name="comm" id="comm">
Housing & Utilities: <input type="text" name="housing" id="housing">
<br>
Gross Pay: <input type="text" name="gross" id="gross">
Food & Clothing: <input type="text" name="food"
id="food">
<br>
Deductions: <input type="text" name="deduction" id="deduction">
Entertainment: <input type="text" name="entertainment" id="entertainment">
<br>
Net Pay: <input type="text" name="net" id="net">
Miscellaneous: <input type="text" name="mis" id="mis">
<br>
<input type="button" value="Calculate" onclick="bonus()" >
<input type="reset" value="reset">
<b> </form>

Answer 1

To better alignment you need to use css.
You can use in 2 way;
Pure CSS
CSS Frameworks (Bootstrap, Tailwind ...)
I will share second solution which is generated by bootstrap.
If you prefer first one that would be great loss of time so frameworks better if you know the basics of html and css.
First Step: You need to embed bootstrap files to your html file.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Second Step: Create a bootstrap form (it is actually same form but css specifications would be inheritance by bootstrap, so that's mean you don't need a lot of lines css)
<form>
<!--Creates a row with 12 columns-->
<div class="row">
<!--Use 12/12 columns that's mean 1 row-->
<div class="col-md-12">
<!--Form Group allows you a define label dependent to input and some extra features-->
<div class="form-group">
<!--Label's for and input's Id matches-->
<label for="exampleInputEmail1">Name</label>
<!--Placeholder is very useful, you can route user.-->
<input type="text" class="form-control" id="exampleInputName" aria-describedby="emailHelp"
placeholder="Enter your name">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="exampleInputEmail1">Surname</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Enter your surname">
</div>
</div>
<!--Use 6/12 columns that's mean a half row-->
<div class="col-md-6">
<div class="form-group">
<label for="exampleName">Commission</label>
<input type="text" class="form-control" id="exampleName" placeholder="Enter Commission">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Housing & Utilities</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleName">Gross Pay</label>
<input type="text" class="form-control" id="exampleName">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Food & Clothing</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleName">Deductions</label>
<input type="text" class="form-control" id="exampleName">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Entertainments</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
For detail bootstrap forms manual: https://getbootstrap.com/docs/4.2/components/forms/
Codepen: https://codepen.io/bananamaster/pen/eYYoQPw

Answer 2

People tend to act iffy about HTML tables, but this is a perfectly good situation to use a table for
/* kindly match container width for aesthetics */
#salary, #salary table, #salary input[type="text"] {
width: 100%;
box-sizing: border-box;
}
<form name="salary" id="salary"><table><tr>
<td colspan="2"><!-- these two are two-cell-wide -->
Name:
<br><input type="text">
</td>
</tr><tr>
<td colspan="2">
Sales:
<br><input type="text">
</td>
</tr><tr>
<td width="50%">
Commission:
<br><input type="text">
</td>
<td width="50%">
Housing & Utilities:
<br><input type="text">
</td>
</tr><tr>
<td><!-- no need to specify width from hereon -->
Gross Pay:
<br><input type="text">
</td>
<td>
Food & Clothing:
<br><input type="text">
</td>
</tr><tr>
<td>
Deductions:
<br><input type="text">
</td>
<td>
Entertainment:
<br><input type="text">
</td>
</tr><tr>
<td>
Net Pay:
<br><input type="text">
</td>
<td>
Miscellaneous:
<br><input type="text">
</td>
</tr><tr>
<td colspan="2"><!-- this one's also wider -->
<input type="button" value="Calculate" onclick="bonus()" />
<input type="reset" value="Reset"/>
</td>
</tr></table></form>