Bootstrap Modal Form: Rows are not under the first row - html

Question

I have been trying to get the last 2 rows to be under the first row but to no avail, I have tried to place the 2 rows under the same container of "Name" Row, but the last 2 rows textboxes turned small instead of going placing right under the first row of "Name" Row. Right now, both of the rows are stuck under the img container.
#output_image {
border-style: solid;
float: left;
position: relative;
}
.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;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<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 class="form-horizontal " id="step2">
<div class="form-row" id="comNameAndTypeContainer">
<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>
<!-- Staff name -->
<div class="form-group col-md-5 align-items-center justify-content-center" id="comNameDiv">
<label for="comName" class="fieldHeader"> Name</label>
<input type="text" class="form-control" id="comName" name="comName" placeholder="Enter Name..." required>
</div>
</div>
<!-- Staff identifier -->
<div class="form-row" id="comNameAndTypeContainerr">
<div class="form-group col-md-5" id="comIdentifierDiv">
<label for="comIdentifier" class="fieldHeader">Email/ID</label>
<input type="text" class="form-control" id="comIdentifier" name="comIdentifier" placeholder="Enter Email/ID..." required>
</div>
</div>
<div class="form-row" id="comNameAndTypeContainerrr">
<div class="form-group col-md-2" id="comIdentifierDiv">
<label for="comIdentifier" class="fieldHeader">ID date</label>
<input type="text" class="form-control" id="comIdentifier" name="comIdentifier" placeholder="Enter start ID..." required>
</div>
<div class="form-group col-md-2" id="comIdentifierDiv">
<input type="text" class="form-control" id="comIdentifier" name="comIdentifier" placeholder="Enter End ID..." required>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

Answer 1

I have just swap some of the order of your html and does not included any of my own code in your style css or in your html file.
#output_image {
border-style: solid;
float: left;
position: relative;
}
.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;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
<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 class="form-horizontal " id="step2">
<div class="form-row" id="comNameAndTypeContainer">
<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>
<!-- Staff name -->
<div class="form-group col-md-5 align-items-center justify-content-center" id="comNameDiv">
<label for="comName" class="fieldHeader"> Name</label>
<input type="text" class="form-control" id="comName" name="comName" placeholder="Enter Name..." required>
<!-- Staff identifier -->
<div class="form-row" id="comNameAndTypeContainerr">
<div class="form-group col" id="comIdentifierDiv">
<label for="comIdentifier" class="fieldHeader">Email/ID</label>
<input type="text" class="form-control" id="comIdentifier" name="comIdentifier" placeholder="Enter Email/ID..." required>
</div>
<div class="form-row" style="padding-left: 5px;" id="comNameAndTypeContainerrr">
<div class="form-group col" id="comIdentifierDiv">
<label for="comIdentifier" class="fieldHeader pl-0">ID date</label>
<input type="text" class="form-control" id="comIdentifier" name="comIdentifier" placeholder="Enter start ID..." required>
</div>
<div class="form-group col" id="comIdentifierDiv">
<label for="comIdentifier" class="text-white fieldHeader">ID date</label>
<input type="text" class="form-control" id="comIdentifier" name="comIdentifier" placeholder="Enter End ID..." required>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>