JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
100px width
</h1>
<button style="width:100px">
  <span class="wrapper">
  <span class="text text-main">Warenkorb</span>
  <span class="text text-prefix">In den&nbsp;</span>
  </span>
</button>
<h1>
150px width
</h1>
<button style="width:150px">
  <span class="wrapper">
  <span class="text text-main">Warenkorb</span>
  <span class="text text-prefix">In den&nbsp;</span>
  </span>
</button>
<h1>
300px width
</h1>
<button style="width:300px">
  <span class="wrapper">
  <span class="text text-main">Warenkorb</span>
  <span class="text text-prefix">In den&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;
  background: #3c3c3c;
  color: #efefef;
  padding: 0 5px;
  position: relative;
}

.wrapper {
  display: flex;
  text-align: center;
  flex-wrap: wrap-reverse;
  justify-content: center;
  padding-left: 20px;
}

button:before {
  content: ' ';
  width: 10px;
  height: 10px;
  border: 1px solid red;
  display: inline;
  position: absolute;
  left: 0;
  margin-top: 20px;
  margin-left: calc(-5px + 10%);
}

.text {
  display: inline-block;
  flex-shrink: 0;
}

.text-prefix {}

.text-main {
  order: 2;
}