Aligning elements on different parent elements

How can align divs on the left side? I want to push those variations (Size, Color and Price) element to that yellow line to the left but perfectly aligned together.
sizes

<div class="product-box">
                    <img src="./assets/img/shoe1.jpg" alt="Image Shoes" class="product-image">
                    <div class="product-information">
                        <h4 class="product-title">Nike Brown</h4>
                        <div class="product-info-wrapper">
                            <p class="product-subtitle">SIZE: </p>
                            <ul class="product-sizes product-variation">
                                <li>
                                    <span class="product-size">7</span>
                                </li>
                                <li>
                                    <span class="product-size">8</span>
                                </li>
                                <li>
                                    <span class="product-size">9</span>
                                </li>
                                <li>
                                    <span class="product-size">10</span>
                                </li>
                            </ul>
                        </div>
                        <div class="product-info-wrapper">
                            <p class="product-subtitle">COLOR: </p>
                            <ul class="product-colors product-variation">
                                <li>
                                    <span class="product-color"></span>
                                </li>
                                <li>
                                    <span class="product-color"></span>
                                </li>
                                <li>
                                    <span class="product-color"></span>
                                </li>
                                <li>
                                    <span class="product-color"></span>
                                </li>
                            </ul>
                        </div>
                        <div class="product-info-wrapper ">
                            <p class="product-subtitle">PRICE: </p>
                            <p class="product-price">$ 200</p>
                        </div>
                        <button class="btn btn-add btn-block" type="button">Add to cart</button>
                    </div>
                </div>

Hey!

Did you consider creating two div elements, one for the left side (properties) and one for the right side (values).

In other words, create a <div> element which child elements for “SIZE:” “COLOR:” and “PRICE:”, then create a new <div> containing child elements for “7 - 8 - 9 - 10”, colors and “$200”?

1 Like

content-align: left;

This may help you.

Thank you man!!

2 Likes

That’s perfect! :smiley:
May I ask for a screenshot to know how it looks? Just out of curiousity :stuck_out_tongue:

Lol sure

Happy it turned out good :smiley:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.