My goal is to create a form with inline elements using Bootstrap 4. However, I'm facing an issue where the button always aligns at the top of the row instead of being in the middle like the input field. How can I ensure that the button's position matches the input field's position?
<form role="form" id="form_tambah_kriteria" class="margin-bottom-0">
<div class="form-row">
<div class="form-group col-md-4">
<label>Tipe Decision Maker</label>
<div class="input-group">
<div class="input-group-append"><span class="input-group-text"><i class="ion-ios-contacts"></i></span></div>
<input type="text" name="tipe_dm[]" class="form-control" placeholder="Tipe Decision Maker">
</div>
</div>
<div class="form-group col-md-4">
<label>Owned by:</label>
<div class="input-group">
<select class="form-control" name="owner_dm">
<option value="">0</option>
<option value="1">1</option>
</select>
</div>
</div>
<button class="btn btn-danger">Delete</button>
</div>
</form>
You can view the code on Codepen