テキストとデータを含む行があります。

テキスト ボックスは左揃えで、テキストも左揃えにする必要があります。 ナンバーボックスは右揃えで、テキストも右揃えにする必要があります。

名前が長すぎる場合を除き、これらは並べて存在する必要があります。名前が長すぎる場合は、ナンバー ボックスが行内で折り返されます。行内のすべての数値を一緒にパックする必要があります。各名前の各行の長さは異なります。

ナンバー ボックスが折り返されると、外側のコンテナーは垂直方向に拡張する必要があります。これは、その下に境界線があり、その境界線が数値の下に留まる必要があり、次の行には下に押し下げる必要があるマージンの上部があるためです。

各行の 2 列の数値は、すべての行で垂直方向に揃える必要があります。

行数が多く、何百もの行があるため、レンダリング時間を短くするために冗長なマークアップを最小限に抑える必要があります。

私が試したこと:

float を使用しようとしましたが、float は親コンテナから div をバインド解除し、ラップするときに親ボックスを垂直方向に拡張しません。

right:0px の位置を使用しようとしましたが、ナンバー ボックスが折り返されません。

フレックスを使用してみましたが、各行のテキストと数値の長さが異なるため、数値が他の行と整列しなくなりました。

HTML

CSSS

同様の質問への回答がすべての要件を満たすとは限りません。

最初の div (テキスト) を左揃え、2 番目の div (数値グループ) を右揃えにし、列を揃えて保持し、十分なスペースがない場合に折り返し、何らかの方法でその親コン​​テナを縦にラップして展開します。