I need some help with styling using bootstrap 5. I have set up a codepen for reference: https://codepen.io/korazy/pen/xxmWGOx
Here are the issues I am facing:
The input height changes to match the row height when text wraps. How can I keep the input at the proper height?
I want to align two inputs separated by the word "to" vertically and horizontally. Any suggestions on how to achieve this?
For the select, when "equals" is chosen only one input is displayed, but for "between", two inputs should be shown. How should the HTML structure be for this behavior?
Here's the code snippet:
$(document).ready(function() {
$("#operator").on("change", function() {
onOperatorChange($(this));
});
});
function onOperatorChange(e) {
const sb = e.closest("div.row").find("#show_b");
if (e.val() == "e") {
sb.addClass("visually-hidden");
} else {
sb.removeClass("visually-hidden");
}
}