CSS Wordpress Contact Form Customisation

I have a contact form using Contact Form 7 which only has two fields, an email address input field and a submit button. It will be inserted into several locations on my site each location will be a different width.

I want the email address and the submit button to be on the same row with a margin between the two. However i want the size of them to fill 100% of the available space where it is inserted.

My form short code is

[contact-form-7 id="5345" title="Quick Signup"]

and the code for the form is

<div class="elementor-row">
[email* your-email][submit "Submit"] 
</div>

i have the following css

 .wpcf7 input[type="email"]
 {
     width: 75%!important;
     margin-right:10px;
 }
 .wpcf7 input[type="submit"]
 {
     width: 25%!important;
 }

but this effects all my contact-form-7 forms and not just the one stated above, how do i target only the specified form above with this styling?

Many Thanks for your help

Solution

Adding div tags to both your elements and then applying CSS to those divs through the WordPress customize panel is the way forward.

Separate the elements in different div tags and put them in the form section of contact form 7 plugin

And then add the CSS code in the customize panel of WordPress

    .elementor-row {
        float:left;
        width:50%; /* using percentages is good practice */
    }

    .submit-button {
        float:right;
        width: 49%;  /* add percentage according to your margin requirement */
    }

   <div class="elementor-row">
    [email* your-email]
    </div>

    <div class="submit-button">
    [submit "Submit"] 
    </div>