I am trying to achieve a specific style using the Bootstrap framework. I have been able to achieve something similar to what I want, but the issue is that the save button is not aligned to the right and is not taking up the available width. There is a gap between the save button and the red border wrapper. Is there a way to make the button take up the available width? Can this be achieved using an inline form or something similar? Please help.
https://i.sstatic.net/wR8ci.jpg
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div style="border:1px solid red;" class="container mb-4">
<div class="row mt-4">
<div class="col-5">
<div class="form-group row">
<label for="sel-city" class="col-form-label col-md-2">Label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-city" name="city"></select>
</div>
</div>
</div>
<div class="col">
<div class="form-group row">
<label for="sel-zone" class="col-form-label col-md-2">Label</label>
<div class="col-md-7">
<select class="form-control custom-select" id="sel-zone" name="workzone"></select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-5">
<div class="form-group row">
<label for="sel-stage" class="col-form-label col-md-2">label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-stage" name="stage">
</select>
</div>
</div>
</div>
<div class="col">
<div class="form-group row">
<label for="sel-status" class="col-form-label col-md-2">Label</label>
<div class="col-md-7">
<select class="form-control custom-select" id="sel-status" name="status"></select>
</div>
<button id="btn-status-save" class="btn btn-primary float-right" onclick="saveStatus()">Save</button>
</div>
</div>
</div>
</div>