CSS Media query for grouping float-start bootstrap5.2 - css

Question

I ve impleemented an email form in html/css using bootstrap 5.2.
It looks good in the desktop view as well as in the mobile view but it has some issues in the medium sized screens.
I want the string "Given name:" (#given_name_text) to jump to the next line as soon as it's input field (#given_name_input) is jumping to the next line. The problem is present in the range of (min-width: 520px) and (max-width: 991px), that s why I ve already set up the media query, but I do not know what to enter.
Please find my html and css attached.
I am very greatfull for any hint!
moussioG4
#surname_text {
font-weight: 700;
width: 90px;
}
#surname_input {
width: 300px;
height: 30px;
margin-bottom: 20px;
}
#given_name_text {
font-weight: 700;
width: 130px;
text-align: right;
}
#given_name_input {
width: 300px;
height: 30px;
margin-bottom: 20px;
}
#email_text {
font-weight: 700;
width: 140px;
}
#email_input {
width: 300px;
height: 30px;
margin-bottom: 20px;
}
#message_text {
font-weight: 700;
width: 160px;
}
#message_input {
width: 100%;
height: 250px;
margin-bottom: 20px;
}
#message_button {
width: 130px;
height: 30px;
margin-bottom: 20px;
background-color: #f46530;
font-weight: 700;
color: #E7E7E7;
border: 3px solid #0c0c0c;
}
#message_button:hover {
background-color: #0c0c0c;
}
#media (max-width: 519px) {
#given_name_text {
text-align: left;
}
}
#media (min-width: 520px) and (max-width: 991px) {
}
<div id="main-content" class="container">
<h1>Contact Us</h1>
<p>Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form
Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form
</p>
<div id="name_input" class="row">
<label for="surname_input" id="surname_text" class="float-start">Surname:</label>
<input id="surname_input" class="float-start" type="text">
<label for="given_name_input" id="given_name_text" class="float-start">Given name:</label>
<input id="given_name_input" class="float-start" type="text">
</div>
<div id="mail_input" class="row">
<label for="email_input" id="email_text" class="float-start">E-mail address:</label>
<input id="email_input" class="float-start" type="email">
</div>
<label for="meessage_input" id="message_text">Your message:</label>
<input id="message_input" type="text">
<button type="button" id="s">Send message</button>
</div>
Picture of issue

Answer 1

In case somebody has a similar issue: Solved it by applying the following grid:
<div id="name_input" class="row">
<div class="col-lg-6 col-md-12">
<label for="surname_input" id="surname_text">Surname:</label>
<input id="surname_input" type="text">
</div><!-- End of surname input -->
<div class="col-lg-6 col-md-12">
<label for="given_name_input" id="given_name_text">Given name:</label>
<input id="given_name_input" type="text">
</div><!-- End of given name input -->
</div><!-- End of name input -->