JSFiddle - React, Tailwind, and code Playground

HTML

<p><a class="pro" href="http://imgur.com/8Isga60">Button</a>

</p>
<p>The problem</p>
<p><a class="pro" href="http://imgur.com/8Isga60">Does not work with larger text</a>

</p>
<p><a class="sol" href="http://imgur.com/8Isga60"><span>Does not work with larger text</span></a>

</p>
<p><a class="sol" href="http://imgur.com/8Isga60"><span>random length text</span></a></p>

CSS

a.pro {
    background:url(http://i.imgur.com/8Isga60.png);
    display:inline-block;
    padding:30px 25px;
    height:20px;
    color:white;
    font-size:16px;
}
a.sol {
    background:url(http://i.imgur.com/8Isga60.png);
    display:inline-block;
    padding:30px 0px;
    width: 243px;
    height:20px;
    color:white;
    font-size:16px;
    text-align: center;
}