Как мне стилизовать блоки чтобы текст внутри них совпадал по началу?

Question

[TImur2025]

У меня есть корзина в которой есть заголовки а внизу сам товар и нужно чтоб начало каждого текста было симметрично началу заголовку

нужно вот так
вот мой код

import CartItem from "../../components/CartItem/CartItem";
import styles from "./Cart.module.scss";

import React from "react";

const Cart: React.FC = () => {
  return (
    <div className={styles.root}>
      <ul className={styles.block}>
        <li>Product</li>
        <li>Price</li>
        <li>Quantity</li>
        <li>Subtotal</li>
      </ul>
      <div className={styles.block}>
        <CartItem />
      </div>
    </div>
  );
};

export default Cart;

.root {
  margin-top: 180px;
}

.block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(255, 255, 255);
  padding: 24px 40px;
  box-shadow: 0px 1px 13px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-bottom: 40px;
  
}

и сам CartItem

import React from "react";
import styles from "./CartItem.module.scss";

const CartItem: React.FC = () => {
  return (
    <>
      <div className={styles.title}>
        <img src="https://i.ibb.co/fHSvmqr/Frame-570-2.png" alt="" />
        <h6>LCD Monitor</h6>
      </div>
      <span>$650</span>
      <div className={styles.count}>
        <span>01</span>
        <div className={styles.plusMinus}>
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M7.75732 7.36666L4.45732 10.6667L3.51465 9.72399L7.75732 5.48132L12 9.72399L11.0573 10.6667L7.75732 7.36666Z"
              fill="black"
            />
          </svg>
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.24268 8.63334L11.5427 5.33334L12.4854 6.27601L8.24268 10.5187L4.00002 6.27601L4.94268 5.33334L8.24268 8.63334Z"
              fill="black"
            />
          </svg>
        </div>
      </div>
      <span>$650</span>
    </>
  );
};

export default CartItem;

.count {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  padding: 6px 12px;
}

.plusMinus {
  display: flex;
  flex-direction: column;
}

.title {
  display: flex;
  align-items: center;
  gap: 20px;

  img {
    width: 54px;
    height: 54px;
  }
  h6 {
    font-weight: 400;
  }
}

на этом коде у меня получилось так

Comments

[Ankhena]

Флексами получится, только если будете задавать столбцам ширину.

Нормально получится, если использовать тег или display table, а также гридами с сабгирдами.

[Александр Васильев]

Обычный table