Quero emparelhar cada div .dropdown-select com seu div .phone correspondente, de modo que:
- O primeiro .dropdown-select e o primeiro .phone aparecem na mesma linha,
- O segundo .dropdown-select e o segundo .phone aparecem na próxima linha, e assim por diante.
O .dropdown-select ocupará 25% do espaço e o .phone ocupará 75% do espaço.
As divs são geradas dinamicamente, portanto, não posso alterar o posicionamento nem modificar a estrutura HTML. Preciso usar CSS integralmente para o posicionamento. Tentei diferentes técnicas, sem sucesso.
E as divs com classe como texto não devem ser afetadas pelo flex (não devem ser alteradas), apenas divs com classe dropdown-select e phone.
/* 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>