I have been attempting to create a column with 3 elements in a row: 2 buttons and 1 select dropdown
Initially, I was able to achieve this layout with three buttons. However, when I replaced one button with a select dropdown, it stopped functioning properly without any clear reason.
Here is how the layout looks with 3 buttons, all aligned correctly:
https://i.sstatic.net/ZB0nw.png
Once Tab2 is clicked, the alignment of all three elements becomes distorted:
https://i.sstatic.net/ClLEo.png
My troubleshooting steps included adjusting the width of the form-select
class which was originally set to 100%
:
.form-select {
width: unset;
}
Even after this adjustment, the elements remain misaligned and not in a row.
https://i.sstatic.net/Dfaar.png
How can I rectify this issue and have all three elements aligned in a row?