Jadi saya mendapat beberapa div seperti ini:

<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>

Saya mahu saiznya sama (dengan andaian saiz terbesar masuk akal), seperti ini: https://i.stack.imgur.com/XxgzK.jpg

Pada masa ini saya mempunyai sesuatu seperti ini: https://i.stack.imgur.com/TZmKt.jpg

Pada masa ini saya mempunyai CSS dengan "width: fit-content" tetapi itu hanya menjadikannya saiz yang berbeza. Satu-satunya penyelesaian sebenar yang saya buat ialah menjadikan semuanya saiz tetap, seperti "lebar: 300px", tetapi itu menjadikan beberapa nama yang lebih besar/lebih kecil kelihatan agak funky... Adakah terdapat cara untuk melakukan ini untuk saya Mahukan sesuatu?

Terima kasih banyak atas masa berharga anda!

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