JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
50px width
</h1>
<button style="width:50px">
  <span class="wrapper">
  <span class="text">basket</span>
  <span class="text text-prefix">add to&nbsp;</span>
  </span>
</button>
<h1>
100px width
</h1>
<button style="width:100px">
  <span class="wrapper">
  <span class="text">basket</span>
  <span class="text text-prefix">add to&nbsp;</span>
  </span>
</button>
<h1>
150px width
</h1>
<button style="width:150px">
  <span class="wrapper">
  <span class="text">basket</span>
  <span class="text text-prefix">add to&nbsp;</span>
  </span>
</button>

CSS

h1{
  margin: 0;
  padding: 0;
}
button {
  height: 50px;
  display: block text-align: center;
  border: none;
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-bottom: 10px;
  overflow:hidden;
}

.wrapper {
  display: inline-block;
}

.text {
  float: right
}