How to edit CSS so button appears on same line as input field?

Tags: html,css,stylesheet

Problem :

This is an issue inside a shopping cart, so unfortunately it's a multi-step process to view it:

1. https://blendbee.com/shop/black-tea-blends/happy-times/
2. Click one of the 3 "Add to cart" buttons
3. Click "View Cart"
4. Notice that the "Apply Gift card" button appears on a lower line. I'd like it to be to the right of the "Gift Cart" input field.

Thanks in advance guys! You rock.

---

Solution :

HTML:

    <div id="entry">
        <form>
            <input id="input" placeholder="Coupon Code"></input>
            <button id="submit" type="submit">Apply Coupon</button>
        </form>
    </div>

CSS:

input {
    display: inline;
    width: 70%;
}
button {
    display: inline;
    width: 20%;
}

The width makes it so that they two will never "overflow" the width of the containing div.