Make divs of same class the size of biggest one-CodePudding

so I got some divs, something like this:

<div >
    <div >Something</div>
    <div >Something else</div>
    <div >Something more</div>
</div>

and I want them to have the same size (assuming that what makes sense is the size of the biggest one), something like this: https://imgur.com/a/KsUm9JJ

and currently I have something like this: https://imgur.com/a/IYSKRXJ

Currently I have CSS with "width: fit-content" but that just makes them all different sizes. The only real solution I came up with was making them all a fixed size, like "width: 300px" but that would make some bigger/smaller names look kinda funky... is there a way to do what I want?

Thanks alot for your time!

Edit 1: Added CSS

.specific-event {
  width: fit-content;
  margin-bottom: 10px;
  text-decoration: none;
  color: black;
  padding: 5px 10px;
  background-color: #d1d1d1;
  border-radius: 8px;
}

.specific-event:hover {
  background-color: #9c9c9c;
  color: white;
}

CodePudding user response：

Try adding width: fit-content to your .personal-events-list instead of .specific-event

Like this:

.specific-event {
  margin-bottom: 10px;
  text-decoration: none;
  color: black;
  padding: 5px 10px;
  background-color: #d1d1d1;
  border-radius: 8px;
}

.specific-event:hover {
  background-color: #9c9c9c;
  color: white;
}

.personal-events-list {
  width: fit-content;
}

<div >
    <div >Something</div>
    <div >Something else</div>
    <div >Something more</div>
</div>

CodePudding user response：

You can use CSS word-wrap property.

.specific-event {
  width: fit-content;
  margin-bottom: 10px;
  text-decoration: none;
  color: black;
  padding: 5px 10px;
  background-color: #d1d1d1;
  border-radius: 8px;
  /* You should add these lines. */
  word-wrap: break-word;
  width:300px;
}

.specific-event:hover {
  background-color: #9c9c9c;
  color: white;
}

<div >
    <div >Something</div>
    <div >Something else, and some things.</div>
    <div >Something more. For example, I am writing the long sentence.</div>
</div>