JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button-container">
  <div class="left-button"><a>ButtonWithAReallyLongName</a></div>
  <div class="right-button"><a>AnotherButtonWithAReallyLongName</a></div>
</div>

CSS

.button-container {
  min-width:320px;
}
.button-container > div {
  border: 1px solid gray;
  background-color: orange;
  max-width: 50%;
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing:border-box;
  text-overflow: ellipsis;
}
.left-button {
  float: left;
}
.right-button {
  float: right;
}