JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card">
  <ul>
    <li><a href="#">link looooooooooong 1</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link short2</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link looonger 3</a></li>
    <li><a href="#">link</a></li>

  </ul>
</div>

CSS

.card {
  width: 300px;
  height: 300px;
  background: lightcoral;
  padding: 25px;
}


ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: auto auto;
  }

li:nth-child(2n) {
  display: flex;
  justify-content: flex-end;
}

a {
  color: white;
}