텍스트와 데이터가 포함된 행이 있습니다.

텍스트 상자는 왼쪽으로, 텍스트는 왼쪽으로 정렬해야 합니다. 숫자 상자는 오른쪽 정렬되어야 하고 텍스트는 오른쪽 정렬되어야 합니다.

이름이 너무 길지 않는 한 나란히 존재해야 합니다. 이 경우 숫자 상자가 줄 안에 표시됩니다. 행의 모든 ​​숫자는 함께 채워져야 합니다. 각 이름은 각 줄의 길이가 다릅니다.

숫자 상자가 래핑될 때 외부 컨테이너는 숫자 아래에 있어야 하는 테두리가 있고 다음 줄에는 아래로 밀어야 하는 여백 상단이 있으므로 외부 컨테이너는 수직으로 확장되어야 합니다.

각 행의 숫자 2열은 모든 행에서 수직으로 정렬되어야 합니다.

라인이 수백 개에 달하므로, 렌더링 시간을 단축하려면 중복 마크업을 최소화해야 합니다.

내가 시도한 것:

float를 사용해 보았지만 float는 상위 컨테이너에서 div의 바인딩을 해제하고 상위 상자가 래핑 시 수직으로 확장되지 않습니다.

right:0px 위치를 사용해 보았지만 숫자 상자가 줄바꿈되지 않습니다.

Flex를 사용해 보았지만 각 행의 각 텍스트와 숫자의 길이가 다르기 때문에 숫자가 더 이상 다른 행과 일치하지 않습니다.

HTML

CSS

비슷한 질문에 대한 답변이 모든 요구 사항을 충족할 수는 없습니다.

첫 번째 div(텍스트)를 왼쪽 정렬하고 두 번째 div(숫자 그룹)를 오른쪽 정렬하고, 열 정렬을 유지하고, 공간이 충분하지 않을 때 줄 바꿈하고, 어떻게든 상위 컨테이너가 세로로 줄 바꿈되도록 하려면 어떻게 해야 합니까?