I am looking to arrange elements in a linear manner with equal spacing between them. While I can achieve this using Bootstrap 5 flex, the spacing changes when the text length of a button is altered.
https://i.sstatic.net/kVc8l.png For example, the elements are not equally spaced as desired.
How can I prevent the space from changing and only affect the part that needs to be repositioned?
<div class="d-flex flex-column vh-100">
<div class="row g-0">
<div class="col-md-12">
<div class="d-flex flex-column justify-content-center vh-100">
<div class="d-flex justify-content-evenly align-items-baseline pt-3">
<button type="button" id="button1" class="btn btn-outline-primary btn-lg">Button 1</button>
<button type="button" class="btn btn-outline-primary btn-lg">Button 2</button>
<input type="range" class="volume-range" min="1" max="5" step="1">
</div>
</div>
</div>
</div>
</div>
var buttonTextChanged = false;
var button1 = document.getElementById('button1');
button1.addEventListener("click", function(event) {
if (!buttonTextChanged) {
button1.innerText = "Some large text";
buttonTextChanged = true;
} else {
button1.innerText = "Button 1";
buttonTextChanged = false;
}
});
https://i.sstatic.net/KvHYe.png
Even though the elements are equally spaced initially, they get repositioned after changing text size. How can I align the axis so that increasing text size doesn't disrupt the position of other items?
I am open to options other than d-flex for achieving the desired layout,