So I got some divs, like this:

<div class="personal-events-list">
    <div class="specific-event black-font">Something</div>
    <div class="specific-event black-font">Something else</div>
    <div class="specific-event black-font">Something more</div>
</div>

I want them to be the same size (assuming the largest size makes sense), like this: https://i.stack.imgur.com/XxgzK.jpg

Currently I have something like this: https://i.stack.imgur.com/TZmKt.jpg

Currently I have the CSS with "width: fit-content" but that just makes them different sizes. The only real solution I've come up with is to make them all a fixed size, like "width: 300px", but that makes some of the bigger/smaller names look a bit funky... Is there a way to do this for me Want something?

Thank you very much for your valuable time!

Edit 1: Add 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;
}