https://i.sstatic.net/xSwSH.png
I am facing a specific alignment challenge in my project, especially due to the presence of labels. When I group inputs and a button together and use align items center, it works perfectly. However, the labels affect the height, causing the button to be misaligned.
I attempted to divide the layout into two rows - one for labels and another for inputs + button, which worked on larger devices but not on smaller ones.
Another potential solution I considered was using absolute positioning for the labels, but I'm hesitant about its effectiveness.
Using pseudo-elements for the labels is another idea I have in mind.
Finally, I thought of applying align-self to the button to adjust its position at the bottom and then use margins or padding for alignment. However, I'm unsure if this approach is the best one.
Can anyone suggest a better way to achieve the desired alignment? What approach do you think would work best?
Below is the code snippet I used to experiment with two rows. It requires Bootstrap to run.
<div class="d-flex align-items-end pb-4">
<div class="w-100">
<!-- Label wrapper -->
<div class="row gx-3">
<div class="col-9 row gx-3 align-items-center">
<div class="col-3">
<label class="form-label" for="input1">Label</label>
</div>
<div class="col-3">
<label class="form-label" for="input2">Label</label>
</div>
<div class="col-3">
<label class="form-label" for="input3">Label</label>
</div>
</div>
</div>
<!-- Input wrapper -->
<div class="row gx-3">
<div class="col-9 row gx-3 align-items-center">
<div class="col-3">
<input placeholder="Placeholder" id="input1" class="form-control" />
</div>
<div class="col-3">
<select class="form-select" id="input2">
<option selected value="default">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-3">
<select class="form-select" id="input3">
<option selected value="default">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-3">
<button class="btn btn-outline-secondary">Search</button>
</div>
</div>
</div>
</div>
</div>Please try to recreate the desired layout based on the image in the description. I have not provided code for the other methods I considered, but I believe a verbal description is sufficient. It essentially involves a flex container with inputs. However, when an input is enclosed in a label, aligning the 'search' button at the end becomes an issue as it has to align with both the input and the label wrapper.