JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <ul class="action-box">
        <li class="long-item">Some cool info That needs to be on 2 lines</li>
        <li><a>Do a thing</a></li>
        <li><a>Do a different thing</a></li>
    </ul>

</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:100%;
}

.action-box {
  width: auto;
  display: flex;
  align-items: center;
}

    li {
      /* flex-basis: 100%; */
      width: 100%; /* new */
    }

ul {
  list-style: none;
}

li {
  padding: 0 1rem;
  border: 1px solid black;
}