Want to center an image underneath the quantity box AND add to cart button (which were modified to be side-by-side)

Hi everyone,

I got some custom code from @paul2009 which allows us to put an image underneath the add to cart button wrapper. That's been great. This is that code here:

.tag-INSERT-PRODUCT-TAG .ProductItem-details-excerpt:after {
  display: block;
  content: "";
  height: 145px;
  margin-top: 34px;
  background: url(‘INSERT PRODUCT LINK);
  background-size: contain;
  background-repeat: no-repeat;
}

Then, my designer wanted to put the add to cart button side by side with the quantity box. Unfortunately, we cannot use any PDP designs other than "simple" because we want to use buttons instead of drop down boxes for the variant displays. (because they're better for conversions).

So, we found this other code on this forum from @Rebecca_Grace_Designs that can do this with a little pixel tweaking. This is that code here: 

.ProductItem-details .ProductItem-details-checkout {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.ProductItem-product-price, .ProductItem-details-excerpt {
flex-basis:100%;
}
.sqs-add-to-cart-button-wrapper {
margin-bottom: 0 !important;
position: relative;
bottom: -28px;
}
.product-quantity-input {
flex-basis:30%;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
padding-top: 1.5em;
padding-bottom: 1.5em;
}
@media screen and (min-width:767px) {
.sqs-add-to-cart-button-wrapper {
flex-basis:70%;
}
}
@media screen and (max-width:767px) {
.sqs-add-to-cart-button-wrapper {
flex-basis:60%;
margin-left: 5vw;
}
}

However, using both these codes together makes the picture underneath the add to cart button resize to the same size as the add to cart button wrapper. Which, as you can see from the picture below, looks odd. 

I've made the add to cart button next to quantity box into a custom tag code so that it's only on one of our less-frequented product pages. You can see that here: https://www.blatepapes.com/shop/p/gel-film-square-200

However, now all the add to cart buttons are slightly to the right on mobile view. (will fix itself if the code is fixed)

Can anyone provide an insight into how to fix it so that the picture underneath the add to cart goes and stays across both the quantity box and the add to cart button, while they are side by side? AND also ensure that subscription products do not get messed up since they do not have quantity boxes? 

I also posted a picture of what the code makes the subscription pages look like (that don't have quantity boxes).

Use this code to last line in Code Injection to add image, instead of using CSS :after code

<script>
  $(document).ready(function(){
    $('<img src="https://images.squarespace-cdn.com/content/v1/5f00e6e7a2146372f8efd027/cf5694a2-5df1-4b85-b66b-95489d5ab05e/Empty-Capsule-Advantages-50.png"/>').appendTo('.ProductItem-details-checkout');
});
</script>
<style>
  .ProductItem-details-checkout img {
    order: 8 !important;
}
</style>