I am attempting to create a responsive layout for the labels and text inputs in my HTML code. I want them to align in a single row, with one label and one text input per row when the screen width is below a certain threshold. Once the screen width exceeds this limit, I would like the elements to line up in rows of three. Currently, the elements are displaying in rows of three; however, when the screen reaches the maximum width, the labels and inputs appear misaligned on separate rows. It seems as though they are behaving as if the display property was set to block for the labels. Below is a snippet of my HTML code where I am trying to implement flexbox:
@media only screen and (max-width: 696px) {
#boxes {
display: flex;
flex-direction: row;
}
}<div id="boxes">
<h3 id="question"></h3>
<label id="S" for = "Sn"></label>
<input type = "text" id = "Sn" class='input' autocomplete="off" placeholder="Answer">
<label id="at" for = "atomic"></label>
<input type = "text" id = "atomic" class='input' autocomplete="off" placeholder="Answer">
<label id="elec" for = "electrons"></label>
<input type = "text" id = "electrons" class='input' autocomplete="off" placeholder="Answer">
<h3 id="question2"></h3>
<label id="pro" for = "protons"></label>
<input type = "text" id = "protons" class='input' autocomplete="off" placeholder="Answer">
<label id="ma" for = "mass"></label>
<input type = "text" id = "mass" class='input' autocomplete="off" placeholder="Answer">
<label id="ele" for = "element"></label>
<input type = "text" id = "element" class='input' autocomplete="off" placeholder="Answer">
<h3 id="question3"></h3>
<label id="pro2" for = "protons2"></label>
<input type = "text" id = "protons2" class='input' autocomplete="off" placeholder="Answer">
<label id="at2" for = "atomic2"></label>
<input type = "text" id = "atomic2" class='input' autocomplete="off" placeholder="Answer">
<label id="new" for = "neutrons"></label>
<input type = "text" id = "neutrons" class='input' autocomplete="off" placeholder="Answer">
</div>As illustrated in this screenshot https://i.sstatic.net/UlIHc.png, the labels are currently above the text inputs. My goal is to have the labels aligned with their corresponding text inputs.