my desired output looks like:
┌─────┐┌─────┐
│ A ││ │
└─────┘│ │
┌─────┐│ B │
│ C ││ │
└─────┘│ │
└─────┘
this is what I have tried:
form {
display : flex;
flex-direction : column;
flex-wrap : wrap;
height : 14em;
}
fieldset {
display : block;
margin : 1em .6em;
}
fieldset:nth-child(2) {
order : 2;
flex-basis : 10em;
}<form action="" id="my-form">
<fieldset>
<legend> -A- </legend>
<input type="text">
</fieldset>
<fieldset>
<legend> -B- </legend>
<input type="text">
</fieldset>
<fieldset>
<legend> -C- </legend>
<input type="text">
</fieldset>
</form>[edit] I can confirm that there are no errors in this code. The issue I encountered was actually due to a faulty installation of Firefox on my system. This information came to light after posting the initial question.
I am unable to delete the question as it has received an answer with upvotes.