JSFiddle - React, Tailwind, and code Playground

HTML

<input class="right" type="button" value="without width this padding works fine" />

</br>

<button class="wrong">
  <span>this pushes text to the left, ignoring padding</span>
</button>

CSS

.right {
    padding-left:30px;
    text-align:left;
}

.wrong {
    width:100px;
    overflow: hidden;
}

.wrong span {
    margin-left:30px;
    text-align:left;
    white-space: nowrap;
}