title: Adjust size of checkbox label to grid column size
body: <p>I'm using the <code>&lt;fieldset data-role="controlgroup" data-type="horizontal"&gt;</code> option for checkbox buttons because I want to hide my checkbox and highlight the button if its selected. Of course that works fine, but how can I size the label to the size of the grid column (using <code>ui-grid-c</code>).</p>
  
  <p>Code Example:
  <a href="https://jsfiddle.net/sebsti/z0Lywgd1/" rel="nofollow">https://jsfiddle.net/sebsti/z0Lywgd1/</a></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt; 
     &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
     &lt;!-- Include meta tag to ensure proper rendering and touch zooming --&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
     &lt;!-- Include jQuery Mobile stylesheets --&gt;
     &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"&gt;
     &lt;!-- Include the jQuery library --&gt;
     &lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
     &lt;!-- Include the jQuery Mobile library --&gt;
     &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div data-role="page" id="pageone"&gt;
      &lt;div data-role="main" class="ui-content"&gt;
                  &lt;div class="ui-grid-c"&gt;
                      &lt;div class="ui-block-a"&gt;&lt;/div&gt;
                      &lt;div class="ui-block-b"&gt;
                              &lt;fieldset data-role="controlgroup" data-type="horizontal" &gt;
                                  &lt;input type="checkbox" name="checkbox-h-1a" id="checkbox-h-1a"&gt;
                                  &lt;label for="checkbox-h-1a"&gt;Option 1&lt;/label&gt;
                              &lt;/fieldset&gt;
                              &lt;fieldset data-role="controlgroup" data-type="horizontal" &gt;
                                  &lt;input type="checkbox" name="checkbox-h-1b" id="checkbox-h-1b"&gt;
                                  &lt;label for="checkbox-h-1b"&gt;Option 2&lt;/label&gt;
                              &lt;/fieldset&gt;
                              &lt;input type="checkbox" name="checkbox-h-1c" id="checkbox-h-1c"&gt;
                              &lt;label for="checkbox-h-1c" class="width"&gt;Like this&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="ui-block-c "&gt;
                              &lt;fieldset data-role="controlgroup" data-type="horizontal" &gt;
                                  &lt;input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a"&gt;
                                  &lt;label for="checkbox-h-2a"&gt;Option 3&lt;/label&gt;
                              &lt;/fieldset&gt;
                              &lt;fieldset data-role="controlgroup" data-type="horizontal" &gt;
                                  &lt;input type="checkbox" name="checkbox-h-2b" id="checkbox-h-2b"&gt;
                                  &lt;label for="checkbox-h-2b" class="width"&gt;Option 4&lt;/label&gt;
                              &lt;/fieldset&gt;
                                  &lt;input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c"&gt;
                                  &lt;label for="checkbox-h-2c" class="width"&gt;Like this&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="ui-block-d"&gt;&lt;/div&gt;
                  &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>