Comment faire en sorte que chaque élément ait la même largeur que l'élément le plus large en CSS ?

Comment faire en sorte que chaque élément ait la même largeur que l'élément le plus large

Dans cette disposition, chaque élément s'étire pour occuper la largeur de l'élément le plus large élément, même dans les scénarios où l'élément s'enroule sur plusieurs lignes. Pour obtenir cet effet en utilisant CSS :

<div>

 display: inline-flex;<br> flex -direction : ligne ;<br> justifier-contenu : centre ;<br>}</p><p>.list {<br> display: flex;<br> flex-direction: column;<br>}</p><p>.list-item {<br> text-transform: majuscule;<br> background-color: rgb(200, 30, 40);<br> taille de la police : 1,3em;<br> alignement du texte : gauche;<br> remplissage : 10px;<br> margin : 1px;<br> display: flex;<br> flex-direction: row;<br> flex-wrap: wrap;<br> justifier-content: flex-start;<br>}&lt ;/pre><br><pre class="brush:php;toolbar:false"><p><div> <div class="list"></p>
<pre class="brush:php;toolbar:false"><div>