JSFiddle - React, Tailwind, and code Playground

HTML

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

</br>

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

CSS

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

.wrong {
    padding-left:30px;
    text-align:left;
    width:100px;
}