Как заставить DOV появляться бок о бок без изменения структуры HTML, только используя CSS ⇐ Javascript

[Anonymous]

Я хочу соединить каждый. /> < /ul>
.droddown-Select будет занимать 25% пространства, а .phone будет занимать 75% пространство. Нужно использовать CSS полностью для позиционирования. Пробовал разные методы, не успешные. < /P>
и DIV с классом как текст не следует влиять с гибкой (не следует изменять) только DIV с раскрыванием класса и телефоном. PrettyPrint-Override ">

Код: Выделить всё

/* 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 */
}
}< /code>




Personal eMail 1







Personal eMail 2







Personal eMail 3







Mobile No. 1











Mobile No. 2











Mobile No.  3











Mobile No. 4











Mobile No. 5











Mobile No. 6

Подробнее здесь: https://stackoverflow.com/questions/795 ... ucture-onl