JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<button class="overflow">
    <p>very long button text</p><i class="fa fa-caret-down"></i>
  
  
</button>
<button class="overflow">
  <p>short</p><i class="fa fa-caret-down"></i>
</button>
<button class="normal">
  <p>normal</p><i class="fa fa-caret-down"></i>
</button>
<button class="overflow align">
  <p>with vertical align</p><i class="fa fa-caret-down"></i>
</button>

CSS

* { box-sizing: border-box; }

button { max-width: 100px; }

button p {
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    vertical-align: middle;
    margin: 0;
}

button i {
    width: 20%;
    display: inline-block;
}

button {
  background: black;
  color: white;
  margin: 1em;
}