How do I align the price and add-to-cart button horizontally on a woocommerce single product page?

Question

I'd like them to appear beside each other rather than one above the other.

See the example below: https://tefllessons.com/product/present-perfect-lesson-duration/

I tried display:inline-block but it didn't work.

Answer 1

display: flex is great for this and justify-content and align-items can be used to align content depending on flow and direction

apply these to the container element of the items

EDIT:

you'll get the desired effect by wrapping the price and the form element that contains the button inside a div and applying display: flex to that div.

also in your case I applied the margin-bottom from the button to said div, you will need to remove the margin from the button. and added a gap property to set some spacing between flex items.

css: after grouping, just add this class to said div

.flex-align-center {
    display: flex;
    align-items: center;
    margin-bottom: 1.3em;
    gap: 1.5rem;
}