<ul>
  <li>lorem lorem</li>
  <li>loremlor</li>
  <li>lorem</li>
  <li>lorem lorem lorem</li>
  <li>lorem 9898998</li>
  <li>lorem</li>
  <li>lorem lorem lor lorem</li>
  <li>lorem133</li>
  <li>lorem lorem</li>
  <li>lorem lorem</li>
  <li>lorem</li>
  <li>lorem</li>
  <li>lorem</li>
</ul>

ul {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
  gap: 5px;
  list-style-type: none;
  padding: 0;
  
}
ul::after {
  content: "";
  flex-grow: 100;
}

li {
  flex-grow: 1;
  padding: 0.3em 0.6em;
  border-radius:4px;
  font-size: 18px;
  background: linear-gradient(45deg, #89f7fe, #8ec5fc);
  color: #333333;
  text-align: center;
}


/************/
@import url("https://fonts.googleapis.com/css2?family=Mulish&display=swap");

body {
  font-family: Mulish, sans-serif;
}