How to distribute form fields evenly using Bootstrap 4?

I’ve been trying to to get these fields more evenly distributed, but I haven’t been able to do it yet:

Current

Expectation

This is the piece:

<div class=”row flex-nowrap d-flex align-items-center”>
<div style=”width: 37%” class=”form-group col-sm col-md-3″><select class=”form-control” id=”taskList” placeholder=”Pick a task”>
<option value=””></option>
<option value=”review and approve on page recommendations”>Review and approve</option>
<option value=”review and approve technical seo recommendations”>Review</option>
</select></div>
<div style=”width: 15%” class=”form-group col-sm col-md-2″><input type=”date” class=”form-control” placeholder=”MM/dd/yyyy”></div>
<div style=”width: 10%” class=”form-group col-sm col-md-2″><input type=”link” class=”form-control” placeholder=”Paste a link”></div>
<div style=”width: 32%” class=”form-group col-sm col-md-3″><input type=”text” class=”form-control” placeholder=”Notes”></div>
<div style=”width: 7%” class=”form-group col-sm col-md-1″><button id=”addTask” type=”submit” onclick=”addTaskToDb()”>+</button></div>
</div>

Here is the Fiddle