Changing form layout with CSS

Question

I need some help with CSS.

I have a coupon form on my website and I would like to change the layout. I would like the field and button of the coupon form to be in 1 line and the coupon form to take 100% of the width. How can I do that?

<div class="coupon-form">
        <p class="field">
            <input type="text" name="coupon_code" class="input-text" placeholder="Coupon code" id="coupon_code" value="">
        </p>
        <p class="button">
            <button type="button" class="button" name="apply_coupon" value="Apply">Apply</button>
        </p>
        <div class="clear"></div>
    </div>

Check this question : https://stackoverflow.com/questions/40208829/responsive-full-width-input-with-button — Janak Prajapati, Feb 20 '21 at 13:48

score 2 · Accepted Answer · answered Feb 20 '21 at 13:51

2

You can do this adding this code to your css classes:

.coupon-form {
   display: flex;
}

.coupon-form > .field, 
.coupon-form .input-text {
   width: 100%; 
}

answered Feb 20 '21 at 13:51

maurogandulfo

430
3
8

Changing form layout with CSS

1 Answers1