How do I align labels vertically next to drop downs? - html

Question

This is what my form looks like:
My css is this:
.form select{
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 200px;
border: 0;
margin: 0 0 15 0px;
padding: 10px;
box-sizing: border-box;
font-size: 14px;
}
.form select:hover,.form select:active,.form select:focus {
background: lightgoldenrodyellow;
}
Form is this:
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 950px;
margin: 0 auto 100px;
padding: 10px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
width: 100%;
}
How do I align this properly? Like labels should be next to drop downs on the left aligned vertically? And the drop downs should also be vertically aligned.
HTML is this:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="style.css">
<script>
$(document).ready(function() {
$( "#datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" id="datepicker"></p>
<button onclick="printPage()" style="float:right">Print this page</button>
<form name="form" method="POST">
Select Category
<select name="category" id="category" value="category" class="form-control ddplaceholder" style="width:220px; padding-left:40px;font-size:18px;font-family:Roboto;">
<option value="" disabled selected>Select Category</option>
</select><br>
</form>
<br>
<form method="POST">
Select Item
<select name="item_name" id="item_name" value="item_name" class="form-control ddplaceholder" style="width:220px; padding-left:40px;font-size:18px;font-family:Roboto;">
<option value="" disabled selected>Select Item</option>
</select><br>
</form>
<form name="form" method="POST">
Select Vendor Name
<select name="vendor_name" id="vendor_name" value="vendor_name" class="form-control ddplaceholder" style="width:220px; padding-left:40px;font-size:18px;font-family:Roboto;">
<option value="" disabled selected>Select Vendor</option>
</select><br>
</form>
Unit <input type="text" placeholder="Unit" id="Unit"><br>
Price per Unit <input type="text" placeholder="Price per Unit" id="Price_per_Unit"><br>
Quantity <input type="text" placeholder="Quantity" id="Quantity"><br>
VAT <input type="text" placeholder="VAT" id="VAT"><br>
Freight Charges <input type="text" placeholder="Freight charges" id="Freight_charges"><br>
Other Charges <input type="text" placeholder="Other Charges" id="Other_Charges"><br>
Total <input type="text" placeholder="Total" id="Total"><br>
<form method="POST">
<input type="submit" name="submit" value="Update" style="width:150px;padding:10px;">
</form>

Answer 1

This has nothing to do with PHP.
Put the labels and form inputs in divs floating left with fixed width :
<div class="labelContainer">
<label for="input1">Input 1</label>
</div>
<div class="inputContainer">
<select id="input1">
<option>Option 11</option>
<option>Option 12</option>
</select>
</div>
<div class="labelContainer">
<label for="input2">Input 2</label>
</div>
<div class="inputContainer">
<select id="input2">
<option>Option 21</option>
<option>Option 22</option>
</select>
</div>
<div class="labelContainer">
<label for="input3">Input 3</label>
</div>
<div class="inputContainer">
<select id="input3">
<option>Option 31</option>
<option>Option 32</option>
</select>
</div>
CSS :
.labelContainer {
clear: both;
float: left;
width: 200px;
}
.inputContainer {
float: left;
width: 200px;
}
Fiddle

Answer 2

Put your form labels in tag and add "class=form-labels" to them.
then add following code to your css
h4.form-labels
{
font-family: "Roboto", sans-serif;
outline: 0;
width: 200px;
border: 0;
margin:0;
padding:0;
font-size: 14px;
display:inline-block;
}

Answer 3

Here a fiddle with corrections to your css: https://jsfiddle.net/vjeqfuy2/7/
Date:
Print this page
<form name="form" method="POST">
Select Category
<select name="category" id="category" value="category" class="form-control ddplaceholder">
<option value="" disabled selected>Select Category</option>
</select><br>
</form>
<br>
<form method="POST">
Select Item
<select name="item_name" id="item_name" value="item_name" class="form-control ddplaceholder" >
<option value="" disabled selected>Select Item</option>
</select><br>
</form>
<form name="form" method="POST">
Select Vendor Name
<select name="vendor_name" id="vendor_name" value="vendor_name" class="form-control ddplaceholder">
<option value="" disabled selected>Select Vendor</option>
</select><br>
</form>
Unit <input type="text" placeholder="Unit" id="Unit"><br>
Price per Unit <input type="text" placeholder="Price per Unit" id="Price_per_Unit"><br>
Quantity <input type="text" placeholder="Quantity" id="Quantity"><br>
VAT <input type="text" placeholder="VAT" id="VAT"><br>
Freight Charges <input type="text" placeholder="Freight charges" id="Freight_charges"><br>
Other Charges <input type="text" placeholder="Other Charges" id="Other_Charges"><br>
Total <input type="text" placeholder="Total" id="Total"><br>
<form method="POST">
<input type="submit" name="submit" value="Update" style="width:150px;padding:10px;">
</form>
form select{
font-family: "Roboto", sans-serif;
outline: 0;
background: #fff;
width: 200px;
border: 0;
margin: 0 0 15px 0;
padding: 10px;
box-sizing: border-box;
font-size: 14px;
height: 40px;
}
form select:hover, form select:active, form select:focus {
background: lightgoldenrodyellow;
}