How to Make Every Item the Same Width as the Widest Element in CSS?

How to Make Every Item the Same Width as the Widest Element

In this layout, each item stretches to occupy the width of the widest element, even in scenarios where the item wraps onto multiple lines. To achieve this effect using CSS:

<div>

  display: inline-flex;<br>  flex-direction: row;<br>  justify-content: center;<br>}</p><p>.list {<br>  display: flex;<br>  flex-direction: column;<br>}</p><p>.list-item {<br>  text-transform: capitalize;<br>  background-color: rgb(200, 30, 40);<br>  font-size: 1.3em;<br>  text-align: left;<br>  padding: 10px;<br>  margin: 1px;<br>  display: flex;<br>  flex-direction: row;<br>  flex-wrap: wrap;<br>  justify-content: flex-start;<br>}

<p><div>  <div class="list"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

Copy after login

Copy after login