[FIXED] How to make 2 different buttons with 2 different widths resize the same amount

Issue

So the problem that I'm having is that I have 2 different buttons. One of them is an add to cart button, and the other one is a buy now button. I also have a quantity input, which I placed next to my add to cart button. But since my buttons are not the same width they are not resizing the same amount. I want to have my add to cart button and my quantity input together be the same width as my buy now button, without my quantity losing shape after the screen gets smaller.

EDIT The link to my website is kuduzovic.myshopify.com and the password is soltew.

Here is the HTML/Shopify code:

        <div class="payment-buttons">
            <div class="cart-cta_wrapper">
                <form method="post" action="/cart/add" style="display: flex;">
                    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
                    <button class="featured-atc">
                        <input type="submit" value="Add to cart" class="atcbtn" />
                    </button>
                    <div class="featured-quantity_wrapper">
                        <span class="minus">-</span>
                        <input type="text" value="1" />
                        <span class="plus">+</span>
                    </div>
                </form>
            </div>
            {% form 'product', product %}
            <div class="buy-now_button">
                {{ form | payment_button }}
            </div>
            {% endform %}
        </div>

And here is the css for the buttons and the quantity:

span {
  cursor: pointer;
}
.minus,
.plus {
  width: 30px;
  height: 44px;
  background: #f2f2f2;
  border-radius: 4px;
  padding: 8px 5px 8px 5px;
  border: 1px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
input {
  height: 44px;
  width: 70px;
  text-align: center;
  font-size: 26px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
}
button.featured-atc {
  width: 60%;
  background: #db9741;
  border: none;
  height: 44px;
}

.featured-atc input {
  height: 44px;
  background: #db9741;
  width: 100%;
  border: none;
  color: white;
}

.featured-quantity_wrapper {
  padding-left: 7px;
}

.cart-cta_wrapper form {
  display: flex;
}
@media only screen and (max-width: 767px) {
  .shopify-payment-button__button {
    width: 95%;
    background: #db9741;
    border: none;
    height: 44px;
    overflow: hidden;
    display: inline-block;
  }

  .cart-cta_wrapper form {
    display: flex;
  }
  .buy-now_button {
    padding-top: 30px;
    padding-bottom: 10px;
  }
  .payment-buttons {
    text-align: center;
  }
}

Solution

So I figured out what I was doing wrong, and it was the fact that I didn't make my add to cart button have the same width as my buy now button. I made my buy now button have a width of 100%, while my add to cart button had width of 60% (that way the quantity would fit). What I should have done is use calc to make my button 100% minus how wide my quantity is. This way both buttons will shrink the same amount, and the quantity will keep its original shape.

The code I had before:

button.featured-atc {
  width: 60%;
  background: #db9741;
  border: none;
  height: 44px;
}

The code I have now:

button.featured-atc {
  width: calc(100% - 170px);
  background: #db9741;
  border: none;
  height: 44px;
}

Answered By - Arnes Kuduzovic

Answer Checked By - Marilyn (PHPFixing Volunteer)