Форма контакта Ширина ввода Не соответствует форме

Question

Итак, у меня есть эта контактная форма со странным размещением меток и входных данных, я получил ее настолько близко к дизайну, насколько мог, но она выглядит не так, потому что ширина строк в полях ввода не выстраивается, То же самое для Boxe (я знаю о радио-кнопках, которые я все еще пытаюсь выяснить, что укусило)

Собираюсь поделиться некоторой Картинкой для Визуального Представления, тогда я поделюсь своим кодом и тому подобным.

Дизайн:

Мое замечание по реализации: Все еще заняты, пока не отправили и не избавились от переключателей как-то

Но если вы посмотрите, видите ли вы, как мой не создает аккуратную коробку? Я не понимаю, что делать здесь.

Кроме того, я использую огромные формы для создания этого, а затем стилизирую все сам.

 <div class="row">
                <div class="col-md-9">
                    <div class="Contact-us">
                        <?php
                        echo do_shortcode('[formidable id=2]');
                        ?>
                    </div>
                </div>
                <div class="col-md-3"></div>
            </div>

with_frm_style .frm_left_container .frm_primary_label{
    width: 100%;
}

.frm_primary_label{
    font-size:25px!important;
    margin:0px!important;
    padding: 0px!important;
    color:#FDF1DC!important;
    font-family: 'Raleway SemiBold', arial!important;
    letter-spacing: 1px!important;
}

.frm_form_field.frm_left_container .frm_primary_label{
    float:none!important;
}

.frm_style_formidable-style.with_frm_style .frm_radio label, .frm_style_formidable-style.with_frm_style .frm_checkbox label{
    font-size:18px!important;
    font-family: 'Raleway SemiBold', arial!important;
    letter-spacing: 1px!important;
}
.frm_style_formidable-style.with_frm_style input[type=text], .frm_style_formidable-style.with_frm_style input[type=password], .frm_style_formidable-style.with_frm_style input[type=email], .frm_style_formidable-style.with_frm_style input[type=number], .frm_style_formidable-style.with_frm_style input[type=url], .frm_style_formidable-style.with_frm_style input[type=tel], .frm_style_formidable-style.with_frm_style input[type=phone], .frm_style_formidable-style.with_frm_style input[type=search], .frm_style_formidable-style.with_frm_style select, .frm_style_formidable-style.with_frm_style textarea, .frm_form_fields_style, .frm_style_formidable-style.with_frm_style .frm_scroll_box .frm_opt_container, .frm_form_fields_active_style, .frm_form_fields_error_style, .frm_style_formidable-style.with_frm_style .frm-card-element.StripeElement, .frm_style_formidable-style.with_frm_style .chosen-container-multi .chosen-choices, .frm_style_formidable-style.with_frm_style .chosen-container-single .chosen-single{
    border-radius: 0!important;
    background: none!important;
    border-top: none!important;
    border-left: none!important;
    border-bottom: 1px solid #585669!important;
    border-right: none!important;
    font-size:25px!important;
    color:#585669!important;
    font-family: 'Raleway Thin', arial;
    padding: 0px!important;
    letter-spacing: 1px!important;
}

.frm_radio{
    border: 1px solid #FDF1DC!important;
    padding: 5px!important;
    font-family: 'Raleway SemiBold', arial!important;
    margin:7px!important;
}

.frm_radio label{
    font-family: 'Raleway SemiBold', arial!important;
    color: #FDF1DC!important;
    letter-spacing: 1px!important;
}


.frm_style_formidable-style.with_frm_style .form-field{
    margin:5px!important;
}

Не уверен, как go о совместном использовании функций формы

Честно говоря, я не ожидаю, что кто-либо выяснить любой из классов, и если go приложить все усилия, любой общий пример будет очень полезен, я выясню реализации

Answer 1

использование flex

.frm_left_container{
   display:flex;
}
.frm_left_container input{
   flex:1;
   margin-left:5px;
}