Text and Box Alignment - html

Question

I'm new at this so please bear with me. I'm trying to align the text and their input fields - just like this example - by using the label class in the CSS file (please check below) but for some reason it is not working and I can't figure out what I'm doing wrong. Could someone please help me out?
Here's my code:
/* Set main division background color, color, width, padding, border-radius, box-alignment */
.mainD {
background-color: white;
color: black;
width: 500px;
padding: 20px;
border-radius: 25px;
box-align: center;
}
/* Set fieldset in the center with no border */
fieldset {
border: none;
text-align: center;
}
/* Aligns texts and their fields */
label {
display: inline-block;
text-align: right;
}
<div class="mainD">
<h1>Interest Calculator</h1>
<fieldset>
<!---Input box for the amount--->
<label for="principal">Amount
<input type="number" id="principal"></label>
<br><br>
<!---Slider for the interest rate--->
<label for="rate" onchange="updateRate()">Interest Rate
<input type="range" id="rate" min="1" max="10" step="0.25" value="5.25">
<span id="rate_val">5.25</span>%</label>
<br><br>
<!---Dropdown box for the years--->
<label> No. of Years
<select id="years">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select></label> (additional code..)
</fieldset>
</div>

Answer 1

You can make use of flexbox to align the items vertically and horizontally. Then use justify-content to space them evenly as well to achieve the effect you want in the picture. See the snippet below:
/* Set main division background color, color, width, padding, border-radius, box-alignment */
.mainD {
background-color: white;
color: black;
width: 500px;
padding: 20px;
border-radius: 25px;
box-align: center;
}
/* Set fieldset in the center with no border */
fieldset {
border: none;
text-align: center;
}
/* Aligns texts and their fields */
label {
display: flex;
align-items: center;
justify-content: space-between;
}
.input {
display: flex;
width: 300px;
justify-content: flex-start;
align-items: center;
}
<div class="mainD">
<h1>Interest Calculator</h1>
<fieldset>
<!---Input box for the amount--->
<label for="principal">Amount
<div class="input"><input type="number" id="principal"></div>
</label>
<br><br>
<!---Slider for the interest rate--->
<label for="rate" onchange="updateRate()">
Interest Rate
<div class="input">
<input type="range" id="rate" min="1" max="10" step="0.25" value="5.25">
<span id="rate_val">5.25</span>%
</div>
</label>
<br><br>
<!---Dropdown box for the years--->
<label> No. of Years
<div class="input">
<select id="years">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</label>
</fieldset>
</div>

Answer 2

i center everything just to prove it actually center i added border feel free to remove it after
/* Set main division background color, color, width, padding, border-radius, box-alignment */
.mainD {
background-color: white;
color: black;
width: 500px;
padding: 20px;
border-radius: 25px;
box-align: center;
}
/* Set fieldset in the center with no border */
fieldset, h1 {
border: 2px solid #ff8197;
text-align: left;
margin: auto auto auto auto;
width: 60%;
}
/* Aligns texts and their fields */
label {
display: inline-block;
text-align: right;
}
<div class="mainD">
<h1>Interest Calculator</h1>
<fieldset>
<!---Input box for the amount--->
<label for="principal">Amount
<input type="number" id="principal"></label>
<br><br>
<!---Slider for the interest rate--->
<label for="rate" onchange="updateRate()">Interest Rate
<input type="range" id="rate" min="1" max="10" step="0.25" value="5.25">
<span id="rate_val">5.25</span>%</label>
<br><br>
<!---Dropdown box for the years--->
<label> No. of Years
<select id="years">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select></label> (additional code..)
</fieldset>
</div>