title: Non-bold text to take the space of bold text
body: <p>I am using CSS to style some radio buttons as tabs.  I would like the "selected" tab's font-weight to be bold.  Of course, this causes the size of the tab to increase, as the text takes up more space.  I would like to find a way to have the text go from bold to non-bold without the "tab" changing size</p>
  
  <p><img src="https://i.stack.imgur.com/DyG1v.png" alt="Tab 1 selected"></p>
  
  <p><img src="https://i.stack.imgur.com/vSrtO.png" alt="Tab 2 selected"></p>
  
  <p>Short of setting a fixed width, is there a crafty and clean way of making the text take up the size of bold text without it actually being bold?</p>
  
  <p>The only method I can think of would be to have the bold text exist (causing the text to exist twice in the HTML), but with <code>visibility: hidden</code>.</p>
  
  <h3>Markup:</h3>
  
  <pre><code>&lt;label class="tab active"&gt;&lt;input type="radio" name="someTabs" value="someValueA" /&gt;Tab 1&lt;/label&gt;
  &lt;label class="tab"&gt;&lt;input type="radio" name="someTabs" value="someValueB" /&gt;Tab 2 (with longer text)&lt;/label&gt;
  </code></pre>
  
  <h3>Relevant CSS as it is now:</h3>
  
  <pre><code>.tab {
    display: block;
    font-size: 1.2em;
    height: 2em;
    line-height: 2em;
    margin-right: 1px;
    padding: 0 2em;
    position: relative;
    text-align: center;
    float: left;
  }
  .tab.active,
  .tab:hover {
    font-weight: bold;
  }
  .tab input[type=radio] {
    display: none;
  }
  </code></pre>