Contact form Input Width Not matching to form a box

Question

So I have this Contact form with a strange placement of labels and inputs, I've gotten it as close to the design As I could but It looks off because the width of the line's on the input fields are not Lining up, The same for the Boxe's (I'm aware of the Radio buttons I'm still trying to figure that bit out)

Going to share some Picture for a Visual Representation then ill share my code and such.

The Design:

My Implementation Note: Still busy havent done submit and getting rid of radio buttons somehow

But if you have a look do you see how mine doesnt create a neat box? I'm confused as to what to do here.

Also i'm using formidable forms to build this and then styling everything my self.

 <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;
}

Not sure how to go about sharing the Form Functionality

I honestly dont expect anyone to figure out any of the classes and having to go threw that effort, Any General Example's will be of great help I'll figure out the Implementations

Answer 1

use flex

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