title: Keeping an elements width static after removing another element while still remaining responsive
body: <p>I have a button with some text in it and when a user presses the button I replace it with a loading symbol. When I remove the text inside of the button and replace it with the spinner, the button shrinks.</p>
  
  <p>I have created a <a href="https://jsfiddle.net/maxshuty/n98f6vks/1/" rel="nofollow noreferrer">fiddle of the issue</a>. </p>
  
  <p>I know that I can simply add a fixed width to the element, however the page is responsive all the way down to 300 pixels. I also know I can add media queries to address this, but I'm wondering if there is any easier way via LESS or vanilla CSS to handle this without all the media queries?</p>
  
  <p>Here is my basic setup:</p>
  
  <pre><code>&lt;button&gt;
    &lt;span class="hidden-conditionally"&gt;
      Click here to perform an action!
    &lt;/span&gt;
  
    &lt;span id="spinner" class="displayed-conditionally"&gt;
      Loading...
    &lt;/span&gt;
  &lt;/button&gt;
  </code></pre>