我想将每个 .dropdown-select div 与其对应的 .phone div 配对，这样：
- 第一个 .dropdown-select 和第一个 .phone 出现在同一行，
- 第二个 .dropdown-select 和第二个 .phone 出现在下一行，依此类推。
.dropdown-select 将占用 25% 的空间，而 .phone 将占用 75% 的空间。
这些 div 是动态生成的，因此我无法更改其定位或修改 HTML 结构。需要完全使用 CSS 进行定位。尝试了不同的技巧，但均未成功。
并且具有类为文本的 div 不应受到 flex 的影响（不应更改），只有具有类 dropdown-select 和 phone 的 div 才应该受到 flex 的影响。
/* Main container that holds all the input fields */
.contactFormContainer .field__group {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
/* Ensure each .dropdown-select and .phone div takes up 50% of the container width */
.contactFormContainer .dropdown-select,
.contactFormContainer .phone {
display: flex;
flex-direction: column;
width: calc(50% - 5px);
/* Make sure each takes up 50% of the space with 5px margin */
}
/* Ensure input fields inside dropdown-select and phone take full width */
.contactFormContainer .dropdown-select__input,
.contactFormContainer .phone__container input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* The .text divs remain as block-level elements */
.contactFormContainer .text {
display: block;
margin-bottom: 10px;
}
/* Media Query for smaller screens */
@media (max-width: 768px) {
.contactFormContainer .field__group {
flex-direction: column;
/* Stack everything vertically on small screens */
}
.contactFormContainer .dropdown-select,
.contactFormContainer .phone {
width: 100%;
/* Full width for small screens */
}
}<div class="contactFormContainer">
<div class="field__group">
<div class="text">
<label for="per_email_1">
Personal eMail 1
</label>
<div class="text__count ">
<input type="Text" name="per_email_1" aria-label="per_email_2" id="per_email_1_a_1"
placeholder="Personal eMail 2" minlength="8" maxlength="70" pattern="^[a-zA-Z0-9_%+\-]+([a-zA-Z0-9_%+\.\-]+)@(?!.*?\.\.)([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})"
value="">
</div>
</div>
<div class="text">
<label for="per_email_2">
Personal eMail 2
</label>
<div class="text__count ">
<input type="Text" name="per_email_2" aria-label="office_email_1" id="per_email_2_a_1"
placeholder="Office Email1" minlength="8" maxlength="70" pattern="^[a-zA-Z0-9_%+\-]+([a-zA-Z0-9_%+\.\-]+)@(?!.*?\.\.)([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})"
value="">
</div>
</div>
<div class="text">
<label for="per_email_3">
Personal eMail 3
</label>
<div class="text__count ">
<input type="Text" name="per_email_3" aria-label="office_email_2" id="per_email_3_a_1"
placeholder="Office Email 2" minlength="8" maxlength="70" pattern="^[a-zA-Z0-9_%+\-]+([a-zA-Z0-9_%+\.\-]+)@(?!.*?\.\.)([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})"
value="">
</div>
</div>
<div class="dropdown-select " id="mobile_1">
<label for="mobile_1">
Mobile No. 1
</label>
<div class="dropdown-container">
<div class="dropdown-select__field ">
<input type="text" class="dropdown-select__input" id="mobile_1_a_1" placeholder="">
</div>
</div>
<span class="">
</span>
</div>
<div class="dropdown-select " id="mobile_2">
<label for="mobile_2">
Mobile No. 2
</label>
<div class="dropdown-container">
<div class="dropdown-select__field ">
<input type="text" class="dropdown-select__input" id="mobile_2_a_1" placeholder="">
</div>
</div>
<span class="">
</span>
</div>
<div class="dropdown-select " id="mobile_3">
<label for="mobile_3">
Mobile No. 3
</label>
<div class="dropdown-container">
<div class="dropdown-select__field ">
<input type="text" class="dropdown-select__input" id="mobile_3_a_1"
placeholder="">
</div>
</div>
<span class="">
</span>
</div>
<div class="dropdown-select " id="mobile_4">
<label for="mobile_4">
Mobile No. 4
</label>
<div class="dropdown-container">
<div class="dropdown-select__field ">
<input type="text" class="dropdown-select__input" id="mobile_4_a_1"
placeholder="">
</div>
</div>
<span class="">
</span>
</div>
<div class="dropdown-select " id="mobile_5">
<label for="mobile_5">
Mobile No. 5
</label>
<div class="dropdown-container">
<div class="dropdown-select__field ">
<input type="text" class="dropdown-select__input" id="mobile_5_a_1"
placeholder="">
</div>
</div>
<span class="">
</span>
</div>
<div class="dropdown-select " id="mobile_6">
<label for="mobile_6">
Mobile No. 6
</label>
<div class="dropdown-container">
<div class="dropdown-select__field ">
<input type="text" class="dropdown-select__input" id="mobile_6_a_1"
placeholder="">
</div>
</div>
<span class="">
</span>
</div>
<div class="phone" id="mobile_1_add">
<label for="mobile_1_add">
</label>
<div class="phone__container ">
<input type="text" name="mobile_1_add" id="mobile_1_add_a_1" placeholder=""
minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
</div>
</div>
<div class="phone" id="mobile_2_add">
<label for="mobile_2_add">
</label>
<div class="phone__container ">
<input type="text" name="mobile_2_add" id="mobile_2_add_a_1" placeholder=""
minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
</div>
</div>
<div class="phone" id="mobile_3_add">
<label for="mobile_3_add">
</label>
<div class="phone__container ">
<input type="text" name="mobile_3_add" id="mobile_3_add_a_1" placeholder=""
minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
</div>
</div>
<div class="phone" id="mobile_4_add">
<label for="mobile_4_add">
</label>
<div class="phone__container ">
<input type="text" name="mobile_4_add" id="mobile_4_add_a_1" placeholder=""
minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
</div>
</div>
<div class="phone" id="mobile_5_add">
<label for="mobile_5_add">
</label>
<div class="phone__container ">
<input type="text" name="mobile_5_add" id="mobile_5_add_a_1" placeholder=""
minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
</div>
</div>
<div class="phone" id="mobile_6_add">
<label for="mobile_6_add">
</label>
<div class="phone__container ">
<input type="text" name="mobile_6_add" id="mobile_6_add_a_1" placeholder=""
minlength="8" maxlength="8" pattern="^[89]\d{7}$" value="">
</div>
</div>
</div>
</div>