I'm trying to achieve the following responsive behaviour when scaling the browser.
On desktop I want the label-input pair to show side by side. When scaling the browser width, I want the pairs to show on top of each other. Also the input and labels should be wrapped.
Here's some images of my structure and desired behaviour.
I'm close, using flexbox and wrap, however there are some small jumps when resizing:
I think it has something to do with the label and input pairs not being equal in size, but i thought the flex: 1 setting would make them equal.
.select-date-div { display: flex; justify-content: center; flex-wrap: wrap; width: 80%; gap: 10px; margin: auto;}.pair-left,.pair-right { display: flex; flex-wrap: wrap; justify-content: center; flex: 1 1 0px; width: 100%; margin: 0; padding: 0;}.pair>label { flex: 1 1 0px; margin-bottom: 0.5em; white-space: nowrap; margin-top: 1em; text-align: center;}.pair>input { flex: 2 2 0px; margin-bottom: 0.5em; /* Adjust spacing between elements as needed */ max-height: 2em; margin-top: 0.2em;}#fetch_button { margin-top: 2em; width: 50%; margin-left: auto; margin-right: auto;}<div class="select-date-div"><div class="pair pair-left"><label id="start_date_label" for="start_date">Start Date:</label><input type="text" id="start_date"></div><div class="pair pair-right"><label id="end_date_label" for="end_date">End Date:</label><input type="text" id="end_date"></div></div>