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.
<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>
