tweaking aligment and sizing of elements - css

Question

I'm really bad at using Bootstrap and I struggle endlessly over sizing and alignment. (I come from a print background where I am used to positioning things precisely).
In the snippet below, how would I size the bottom select element so that it right-aligns with the right edge of the select element above it?
<form id="date-format-panel" class="mt-3">
<div class="form-group row">
<label for="padding-input" class="col-4 col-form-label-sm text-right">Pad timeline start and end dates by</label>
<input class="form-control col-1" id="padding-input"></input>
<select class="form-control-sm col-2 ml-1 custom-select" id="padding-format-picker">
<option value="years">Years</option>
<option value="months">Months</option>
<option value="days">Days</option>
<option value="hours">Hours</option>
<option value="minutes">Minutes</option>
<option value="seconds">Seconds</option>
</select>
</div>
<div class="form-group row">
<label for="date-format-picker" class="offset-1 col-3 col-form-label-sm text-right">Date
Format:</label>
<select class="form-control-sm col-3 custom-select" id="date-format-picker">
<option value="MM/D/YYYY">06/21/2019</option>
<option value="MM/D/YYYY h a">06/21/2019 1 AM</option>
<option value="MM/D/YYYY h:mm a">06/21/2019 1:51 AM</option>
<option value="MM/D/YYYY h:mm:ss a">06/21/2019 1:51:23 AM</option>
</select>
</div>
</form>

Answer 1

In my opinion you are battling the grid layout by using different column values than recommended by Bootstrap.
Below is an example of how it can be coded with the default grid values. The only difference is the spacing of the elements will change but, the form will remain responsive and your alignment issues will be resolved. I suggest checking the grid docs.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group row">
<label for="padding-input" class="col-sm-4 col-form-label text-right">Pad timeline start and end dates by</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="padding-input" placeholder=" ">
</div>
<div class="col-sm-6">
<select class="form-control" id="padding-format-picker">
<option value="years">Years</option>
<option value="months">Months</option>
<option value="days">Days</option>
<option value="hours">Hours</option>
<option value="minutes">Minutes</option>
<option value="seconds">Seconds</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="date-format-picker" class="col-sm-4 col-form-label text-right">Date
Format:</label>
<div class="col-sm-8">
<select class="form-control" id="date-format-picker">
<option value="MM/D/YYYY">06/21/2019</option>
<option value="MM/D/YYYY h a">06/21/2019 1 AM</option>
<option value="MM/D/YYYY h:mm a">06/21/2019 1:51 AM</option>
<option value="MM/D/YYYY h:mm:ss a">06/21/2019 1:51:23 AM</option>
</select>
</div>
</div>
</form>