HTML,CSS, Bootstrap checkbox label should have fixed width regardless of Text
<p>I just need some help and hoping some assistance. I have a bootstrap checkbox button and what it is doing is to change its text when clicked. But I want also to make its width fixed regardless of text because the text is changing when I clicked on the button. I want also to make the text center inside the button. Thank you.</p>

<p>Here is my <a href="https://jsfiddle.net/koykoys/u3kjbf7j/" rel="nofollow noreferrer">JSFIDDLE</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#option1').on('click',function(){
 $(this).closest('label').find('span').html('Nice');
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="btn-group" data-toggle="buttons"&gt;
  &lt;label class="btn btn-primary active"&gt;
    &lt;input type="radio" name="options" id="option1" autocomplete="off" checked&gt; &lt;span&gt; CLICK ME&lt;/span&gt;
  &lt;/label&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>