bootstrap modal form label/textbox size empty spaces issue - html

Question

At the start, the first label line has empty spaces in front of it, causing it to be pushed forward. Hence, I adjusted it using style in the HTML page, why and how do I resolve this issue?
I am unable to change the textbox size of the form as well. I would like to change the textbox size in the Food div container, both of the text boxes to be aligned in one straight line and the word "To" in between the boxes, without affecting the whole form alignment.
#output_image{
border-style: solid;
float:left;
}
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: relative;
z-index: -1;
}
.label{
opacity: 0;
}
.inputfile + label {
position: relative;
font-size: 2.5em;
display: inline-block;
color: black;
text-align: center;
padding: 2px 2px;
text-decoration: none;
float:left;
}
.inputfile:focus + label,
.inputfile + label:hover {
}
.inputfile + label {
cursor: pointer;
}
.iconplus{
position: relative;
}
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">
Instagram Like
</button>
<!-- Modal -->
<div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-right" role="document">
<div class="modal-content">
<div class="modal-header ">
<h2 style="font-family: Lato; font-size:29pt; font-weight:bold;" class="modal-title " id="exampleModalLongTitle">Instagram</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body form-horizontal">
<form class="form-horizontal" id="step2">
<img id="output_image" height=270px width=270px>
<input class="inputfile" type="file" id="getFile" accept="image/*" onchange="preview_image(event)">
<label for="getFile" <i class="fa fa-plus-circle iconplus" style = "position:relative; top:23.1rem; right:3.45rem;"></i> </label>
<div class="form-group row align-items-center justify-content-center">
<label style="font-family:Lato; font-size:20pt; font-weight:normal; margin-right:6.8rem;" for="name" class="col-sm-4 control-label col text-left">Name:</label>
<div class="col-sm-5 ">
<input id="name" style= "margin-right:10rem;" class="form-control input-lg row align-items-left justify-content-left" type="text" placeholder="Enter Name" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label style="font-family:Lato; font-size:20pt; font-weight:normal;" for="name" class="col-sm-4 control-label col text-left">Email:</label>
<div class="col-sm-5 ">
<input id="name" class="form-control input-lg row align-items-left justify-content-left" type="text" placeholder="Enter Your Email Address" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label style="font-family:Lato; font-size:20pt; font-weight:normal;" for="name" class="col-sm-2 control-label col text-left " >Food Date:</label>
<div class="col-sm-3">
<input id="name" class="form-control input-lg row align-items-center justify-content-left" type="password" placeholder="Start Food" />
</div>
<label style="font-family:Lato; font-size:20pt; font-weight:normal;" for="name" class="col-sm-2 control-label col text-left " >To</label>
<div class="col-sm-3">
<input id="name" class="form-control input-lg row align-items-center justify-content-left" type="password" placeholder="End Food" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
</div>