Getting newsletter block form fields to resize just like contact section form fields?

I'm using the newsletter block to collect subscriptions. I want the newsletter form field sizing to work exactly the same way as the contact form fields. The contact form first name and last name fields stays together (love that), and along with the email field, they all resize responsively together (love that more).  The newsletter form first name and last name won't stay together and email field length is shorter when the first name and last name fields do stay together. I've tested out some code but just couldn't get the newsletter fields to resize that way.

https://grasshopper-iguana-at8n.squarespace.com/  (pw: cookies).

23 minutes ago, Power_Tech22 said:

USE THIS FOR THE CSS
.form-group {
    display: flex; /* Use flexbox layout to align input fields */
    flex-wrap: wrap; /* Allow fields to wrap on smaller screens */
    gap: 16px; /* Space between the fields */
}

.input-field {
    flex: 1 1 100%; /* Default to full width on smaller screens */
    min-width: 200px; /* Set a minimum width for optimal resizing */
    box-sizing: border-box; /* Include padding/border in total width */
}

/* Responsive adjustments */
@media (min-width: 600px) {
    .input-field {
        flex: 1; /* Evenly divide the space */
    }
}

.submit-button {
    flex: 0 0 auto; /* Keep the button its natural size */
    padding: 10px 20px; /* Add some padding to the button */
}

THEN FOR THE HTML
 

<!-- Newsletter Form Structure -->
<div class="newsletter-form">
    <div class="form-group">
        <input type="text" placeholder="First Name" class="input-field" />
        <input type="text" placeholder="Last Name" class="input-field" />
        <input type="email" placeholder="Email" class="input-field" />
        <button type="submit" class="submit-button">Subscribe</button>
    </div>
</div>

<!-- Contact Form Structure (for reference) -->
<div class="contact-form">
    <div class="form-group">
        <input type="text" placeholder="First Name" class="input-field" />
        <input type="text" placeholder="Last Name" class="input-field" />
        <input type="email" placeholder="Email" class="input-field" />
        <button type="submit" class="submit-button">Send</button>
    </div>
</div>
 

Thanks for the quick reply! But this is what I see from a wide to narrow screen. And if possible, I'd like to just modify the existing fields in the newsletter block (if possible, but not opposed to creating the form with html if this is the best way to do it 🙂).

I'm still looking for help to see if this is possible.

cookies

password is incorrect