Check out my code snippet (here):
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-8 p-0">
<form class="form-group">
<form>
<input type="text" class="form-control w-100 pr-0 mr-0" id="quick-add-task-control-text-area" placeholder="Task name">
</form>
</form>
</div>
<div class="col-4 p-0">
<button type="button" class="btn btn-secondary w-100 h-100 ml-0" id="schedule-button">Schedule</button>
</div>
</div>
</div>
<div class="modal-footer d-flex flex-row justify-content-start pl-0">
<button type="button" class="btn btn-primary btn-sm" id="add-task-modal-save">Save changes</button>
<div class="input-group mb-0 w-50">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelectPriority">Priority</label>
</div>
<select class="custom-select" id="inputGroupSelectPriority">
<option selected>Choose...</option>
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>
</div>
</div>
</div>
</div>When I initiated the modal from the navbar with the "+" icon, I noticed that my input-group's height didn't match the "save changes" button on the left. Despite investigating the styles, I couldn't determine how the button's height was calculated. Lacking references like em, rem, or parent elements, I resorted to setting the height in pixels, which I know is not ideal. So, my inquiry is, how can I properly set the height of the input-group element in a responsive-friendly manner?
(Regarding the modal footer, I opted not to include a container, row, and columns as I did in the body section. Is this approach considered bad practice?)