Trying to position my date range picker across one row - html

Question

When I select the date range option from my dropdown button, the date range options appear on top of each other (see image below). I would like for them to appear in the same row. One option I tried was playing with width, in both pixels and percentages, and when I added it, the entire card stretched to to the right. Does anybody know why this is happening?
This is how it normally looks prior to selecting "Date Range" from the dropdown menu.
When I select "Date Range", this is how it appears. Would like for it to be on one row, instead on top of each other.
When I play with the width property in CSS, the card stretches to the right, which is what I don't want.
<div class="report-card-i report-card-i-height" style="position: fixed; z-index: 10; background-color: #fff; float: unset; top: 80px; padding-left: 100px; padding-right: 85px;">
<h1>ABC Corp - Summary</h1>
<div class="col-lg-3 text-center">
#{
<select onchange="updateDates(this, null, null, null )">
<option value="0" selected></option>
#for (int i = 1; i < #Model.droplist i++)
{
var tempValue = i;
<option value="#tempValue">#Model.droplist.ElementAt(i)</option>
}
</select>
}
</div>
<div class="col-lg-8" id="dateRange" style="display: none; width:1px">
<div class="col-lg-2">
<div class="input-group date" id="divFrom">
<div class="form-line">
<input id="startDate" name="startDate" type="text" class="form-control" style="background-color: inherit; width: 85px" placeholder="dd/mm/yyyy" value="#Model.StartDate">
</div>
<span class="input-group-addon">
<i class="fa fa-orange fa-calendar"></i>
</span>
</div>
</div>
<div class="col-lg-2">
<span class="font-13 text-muted div-center">to</span>
</div>
<div class="col-lg-2">
<div class="input-group date" id="divTo">
<div class="form-line">
<input id="endDate" name="endDate" type="text" class="form-control" style="background-color: inherit; width: 85px" placeholder="dd/mm/yyyy" value="#Model.EndDate">
</div>
<span class="input-group-addon">
<i class="fa fa-orange fa-calendar"></i>
</span>
</div>
</div>
<div class="col-lg-2">
<button id="btnTest" class="btn-orange fa-orange btn-sm" onclick="updateDateRanges()" style="margin-left: 10px">Submit</button>
</div>
</div>
<br />
<br />
<div class="fa-orange m-t-10 m-b-15 m-l-80">
<div class="row col-lg-12">
<div class="col-sm-2 col-xs-2 text-left">
</div>
<div class="col-sm-2 col-xs-2 text-left">
<h4>Number of Deliveries</h4>
</div>
<div class="col-sm-2 col-xs-2 text-left">
<h4>Deliveries per day</h4>
</div>
<div class="col-sm-2 col-xs-2 text-left">
<h4>Gross Amount Due</h4>
</div>
<div class="col-sm-1 col-xs-1 text-left">
</div>
<div class="col-sm-1 col-xs-1 text-left">
<h4>Monthly Total</h4>
</div>
<div class="col-sm-1 col-xs-1 text-left">
</div>
<div class="col-sm-1 col-xs-1 text-left">
<h4>YTD Total</h4>
</div>
</div>
</div>
</div>

Answer 1

There was a structural issue. Try this
<div class="row">
<div class="col-lg-4 text-center">
#{
<select onchange="updateDates(this, null, null, null )">
<option value="0" selected></option>
#for (int i = 1; i < #Model.droplist i++) { var tempValue=i; <option value="#tempValue">
#Model.droplist.ElementAt(i)</option>
}
</select>
}
</div>
<div class="col-lg-8" id="dateRange">
<div class="row">
<div class="col-lg-3">
<div class="input-group date" id="divFrom">
<div class="form-line">
<input id="startDate" name="startDate" type="text" class="form-control"
style="background-color: inherit; width: 85px" placeholder="dd/mm/yyyy"
value="#Model.StartDate">
</div>
<span class="input-group-addon">
<i class="fa fa-orange fa-calendar"></i>
</span>
</div>
</div>
<div class="col-lg-3">
<span class="font-13 text-muted div-center">to</span>
</div>
<div class="col-lg-3">
<div class="input-group date" id="divTo">
<div class="form-line">
<input id="endDate" name="endDate" type="text" class="form-control"
style="background-color: inherit; width: 85px" placeholder="dd/mm/yyyy"
value="#Model.EndDate">
</div>
<span class="input-group-addon">
<i class="fa fa-orange fa-calendar"></i>
</span>
</div>
</div>
<div class="col-lg-3">
<button id="btnTest" class="btn-orange fa-orange btn-sm" onclick="updateDateRanges()"
style="margin-left: 10px">Submit</button>
</div>
</div>
</div>
</div>