How can I improve the alignment of personalization boxes on my site?

Store Design
1

I would like to have better alignment on some personalization boxes that I added to our site. They are currently showing as

JSD927_0-1651968306996.png
JSD927_0-1651968306996.png419×211 4.4 KB

But I would like them to align like as such but with even better alignment and a space between qty and name

JSD927_1-1651968505037.png
JSD927_1-1651968505037.png378×250 4.59 KB

This is my current code for the first picture (name(s) - year).

{% if section.settings.quantity_enabled %}

{{ 'products.product.quantity' | t }}
{% endif %}

Personalized Name(s) Year

{% if current_variant.available %} {{ 'products.product.add_to_cart' | t }} {% else %} {{ 'products.product.sold_out' | t }} {% endif %}

Would anyone have some input on this on how I can get them aligned any better?

2

@JSD927 - can you share the page link where you have these boxes?

3

I did manage to get them spaced apart, but the alignment is still off and the title placement is also

Personalized Acacia Wood Cutting Board – Valley Laser Worx

4

Hello @JSD927

Open codeeditor and paste the below lines at the bottom of the theme.scss file.

p.line-item-property__field, .product-single__quantity {
    display: flex;
    justify-content: space-between;
}
.line-item-property__field label, .product-single__quantity label {
    width: 50%;
    text-align: left;
    margin-right: 0 !important;
}
.line-item-property__field input, .product-single__quantity input { 
    width: 100%;
}
5

You truly are a Savior! Worked perfect. Thank you, Thank you, Thank you.