I've exhausted all the solutions provided here, including referencing this Bootstrap horizontal-form link. However, nothing seems to be effective. I am open to trying any method at this point, even if it involves just modifying the CSS. My main objective is to have the label aligned in the same line as the input field. Essentially, I want all the labels and inputs to be displayed in a single row. Additionally, I would like to maintain the bootstrap form-control style.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="" class="row py-2 rowRecordBorder" data-toggle="tooltip" data-original-title="">
<div class="app-col col-12 col-md-2 bottom-align ">
<label class="active">Storage Phone #</label>
<input type="tel" id="t887" name="t887" onchange="buildTejPost('t887', 1);" value="100 100 1000" class="form-control" onfocus="$('#t887').inputmask({'mask': '(999) 999-9999'});" onblur="phoneNumberCheck(this);" style="border-color: green;">
</div>
<div class="app-col col-12 col-md-2 bottom-align ">
<label class="active">Storage Fax #</label>
<input type="tel" id="t888" name="t888" onchange="buildTejPost('t888', 1);" value="000 000 0000" class=" form-control" onfocus="$('#t888').inputmask({'mask': '(999) 999-9999'});" onblur="phoneNumberCheck(this);">
</div>
<div class="app-col col-12 col-md-2 bottom-align ">
<label class="active">Storage Pickup Time Open</label>
<input type="text" id="t889" name="t889" onchange="buildTejPost('t889', 1);" value="9:00AM" class=" form-control" maxlength="128">
</div>
<div class="app-col col-12 col-md-2 bottom-align ">
<label class="active">Storage Pickup Time Close</label>
<input type="text" id="t890" name="t890" onchange="buildTejPost('t890', 1);" value="3:00PM" class=" form-control" maxlength="128">
</div>
</div>