Как я могу поставить два элемента ввода рядом в контактной форме 7?

Question

У меня есть контактная форма на моем веб-сайте WordPress, которую я создал с помощью контактной формы 7, и я хочу, чтобы она выглядела точно так же, как эта форма на изображении ниже: Стиль контактной формы, который я хочу

Ниже также код CSS, который я использовал для оформления этой формы:

div.wpcf7 { 
/*background-color: #fbefde;*/
text-align:center;
color: white;
align-items: center;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
text-align: center;
background-color: #fefefe;
border-color: #efefef;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-radius: 4px 4px 4px 4px;     
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] { 
background-color: #fc5f45;
color: #ffffff;
font-family: "Poppins", Sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 50px;
border-radius: 30px 30px 30px 30px;
padding: 0px 40px 0px 40px;
}

Но я хочу, чтобы два элемента ввода были в одной строке, а не один, как на рисунке ниже:

Фактическая форма контакта

Answer 1

Добавьте это к вашему CSS:

body .wpcf7 input[type="text"],
body .wpcf7 input[type="email"] {
width: 49%;
}

body .wpcf7 input[type="text"]:nth-child(even),
body .wpcf7 input[type="email"]:nth-child(even) {
    float: left;
    clear: left;
}

body .wpcf7 input[type="text"]:nth-child(odd),
body .wpcf7 input[type="email"]:nth-child(odd) {
    float: right;
    clear: right;
}

Обратите внимание, это будет работать только в том случае, если ваши входные данные не заключены в другие элементы, если это так, вам нужно изменить селекторы выше, чтобы они соответствовали оболочке каждого входа.