How to make my CSS code vertical to horizontal?

[atulsaini1989]

<div class="pdp-custom-payment-wrapper">
      <button class="pdp-custom-payment-button pdp-custom-cta-button" data-qty="2">
        <span class="pdp-custom-cta-value-lable popular">Most popular</span>
        <div class="pdp-custom-payment-button-inner">
          <span class="pdp-custom-cta">More than 2 Items</span>
          <div class="pdp-custom-cta-price-container">
            <span class="pdp-custom-cta-discount">
              Get&nbsp;5% Off
            </span>
            <span class="pdp-custom-cta-price"> ₹1091<span>/item</span></span>
          </div>
        </div>
      </button>
      <button class="pdp-custom-payment-button pdp-custom-cta-button" data-qty="5">
        <span class="pdp-custom-cta-value-lable">Best Value</span>
        <div class="pdp-custom-payment-button-inner">
          <span class="pdp-custom-cta">More than 5 Items</span>
          <div class="pdp-custom-cta-price-container">
            <span class="pdp-custom-cta-discount">
              Get&nbsp;7% Off
            </span>
            <span class="pdp-custom-cta-price"> ₹1068<span>/item</span></span>
          </div>
        </div>
      </button>
      
      <div class="pdp-custom-payment-button corporate-enquiry">
        <a href="/pages/bulk-orders" class="desktop-pdp-custom-corprate-button">
          <span class="pdp-custom-cta-value-lable">Bulk order</span>
          <div class="pdp-custom-payment-button-inner">
            <span class="pdp-custom-cta">Corporate Deal</span>
            <div class="pdp-custom-cta-link"><span>Click To Enquire</span></div>
          </div>
        </a>
      </div>
    </div>
<style>
@media screen and (min-width: 991px) {
    .pdp-custom-payment-wrapper {
        display: flex;
        margin-bottom: 12px;
    }
}
.pdp-custom-payment-wrapper {
    display: block;
    gap: 21px;
}
@media screen and (min-width: 991px) {
    .pdp-custom-payment-button {
        width: 100%;
        padding: 12px 12px 24px 12px;
    }
}
.pdp-custom-payment-button {
    border-radius: 10px !important;
    border: 1px solid #5c088c;
    ;
background: linen;
    width: calc(100% - 24px);
    margin: 15px 0;
    padding: 15px 24px;
    position: relative;
}
.pdp-custom-cta-value-lable.popular {
    background: #2F9567;
}
@media screen and (min-width: 991px) {
    .pdp-custom-cta-value-lable {
        bottom: -10%;
        top: revert;
        left: 50%;
        transform: translateX(-50%);
    }
}
.pdp-custom-cta-value-lable {
    color: #FFF;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.48px;
    text-transform: uppercase;
    border-radius: 5px;
    background: #1B2024;
    padding: 2px;
    min-width: 118px;
    display: block;
    position: absolute;
top: -10px;
    left: 31px;
}
@media screen and (min-width: 991px) {
    .pdp-custom-payment-button-inner {
        flex-direction: column;
        align-items: center;
    }
}
.pdp-custom-payment-button-inner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}
@media screen and (min-width: 991px) {
    .pdp-custom-cta {
        padding: 0 18px 7px;
        font-size: 12px;
        text-align: center;
        border-bottom: 1px dotted #2F9567;
    }
}
.pdp-custom-cta {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 16px;
}
.pdp-custom-cta-price-container {
    display: flex;
    flex-direction: column;
}
@media screen and (min-width: 991px) {
    .pdp-custom-cta-discount {
        font-size: 12px;
        padding: 10px;
    }
}
.pdp-custom-cta-discount, .pdp-custom-cta-link {
    color: #395B92;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.56px;
    margin-bottom: 7px;
}
@media screen and (min-width: 991px) {
    .pdp-custom-cta-price {
        font-size: 16px;
    }
}
.pdp-custom-cta-price {
    color: #000;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.48px;
    line-height: 1;
}
.pdp-custom-cta-price-container {
    display: flex;
    flex-direction: column;
}
@media screen and (min-width: 991px) {
    .pdp-custom-payment-button-inner {
        flex-direction: column;
        align-items: center;
    }
}
.pdp-custom-payment-button-inner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}


</style>

Currently it is like this 

I want this horizontally .....like this

[Made4uo-Ribe]

Hi @atulsaini1989 

Would you mind to share your storte URL? Thanks!

[atulsaini1989]

Store Product Link:

https://ae25c5.myshopify.com/products/1?_pos=1&_sid=033c7b94e&_ss=r

[Made4uo-Ribe · Accepted solution]

Thanks for the info, Do you mean like this? 

If it is, check this one. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

.pdp-custom-payment-wrapper {
    display: flex;
}
button.pdp-custom-payment-button.pdp-custom-cta-button {
    width: unset !important;
}
span.pdp-custom-cta-value-lable {
    height: fit-content;
    left: 50%;
    right: 50%;
    transform:translate(-50%);
    top: 95%;
}

• And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[atulsaini1989]

After putting the above code its showing like this. I want all 3 in the same line

[BrainStation23]

Hi @atulsaini1989 . Can you pls share your store url?

[atulsaini1989]

Store Product Link:

https://ae25c5.myshopify.com/products/1?_pos=1&_sid=033c7b94e&_ss=r

[atulsaini1989]

https://ae25c5.myshopify.com/products/1?_pos=1&_sid=033c7b94e&_ss=r