css – how to align the flex centre item?

I have a React Component.

If the lengths of the labels(Football etc) are different, the starting position of the progress bar is different. I want to make them always start at the same position. Is it possible to do so using flex?

MyComponent.tsx

import React from "react";

const INITIAL_CATEGORIES = [
  { id: 1, label: "Football" },
  { id: 2, label: "Basketball & Baseball" },
];

const CategoryItem = ({ label }) => {
  return (
    <div className="flex justify-between items-center">
      <span>{label}</span>
      <div className="w-6/12 bg-indigo-100 rounded-full h-2.5 dark:bg-gray-700">
        <div
          className="bg-blue-600 h-2.5 rounded-full"
          style={{ width: "65%" }}
        >
          123
        </div>
      </div>
      <span>$650.00 / $ 1,000.00</span>
    </div>
  );
};

export default function Dictator() {
  return (
    <div className="px-5 py-5 bg-white rounded">
      <div className="flex flex-col gap-3 mt-4">
        {INITIAL_CATEGORIES.map(({ id, label }) => (
          <CategoryItem key={id} label={label} />
        ))}
      </div>
    </div>
  );
}