“Keep me informed” field

We will soon be launching a new secure encrypted messenger app and have started to advertise it on our web-site.

For people to be notified when it is launched, we want to let people enter their email address on the web-site and submit it and then store it to “Flamingo”.

We would like the “Enter your email” field and the “Keep me informed” (or submission) button to be on the same line, and the form has the following elements:

[email* your-email akismet:author_email placeholder “Your email (required)”] [submit “Keep me informed”]

We also envisioning that the “Enter your email” field represent 60% of the page width and the “Keep me informed” (or submission) button represent 20% of the page width (the reminding 20% will be used for “padding”, which will be set in the Elementor editor).

I would expect to set width of the elements in CSS (we work with a child theme so that it will be permanent even in case of theme or contact form 7 updates) and we have for now created the following CSS:

/* Contact Form 7 style */
.wpcf7 input {
width: 20%;
}
.wpcf7 your-email {
width: 60%;
}

Where this does adjust the “Keep me informed” (or submission) button to 20%, it does not adjust the “Enter your email” field and does not keep it all (the “Enter your email” field and “keep me informed” submission button) on the same line!

Any suggestions as to how I solve this from any of you kind souls out there?

The page I need help with: [log in to see the link]