title: How to align a checkbox and a text input tag into a jquery-mobile line
body: <p>Using JqueryMobile, I wish to achieve the following layout:</p>
  
  <ol>
  <li>Having nice decorations boxes to separate my input lines</li>
  <li>Having one checkbox aligned vertically with an input text field, both on the same line</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/wYaBe.png" alt="What I need to achieve"></p>
  
  <p>But after many attempts, the only layout I could come from with is the following: 
  <img src="https://i.stack.imgur.com/Yo9oM.png" alt="What I am getting"></p>
  
  <p>The first attempt looks kind of right using <code>jquerymobile grids</code>, but my <code>checkbox</code> is not selectable anymore and remains checked forever.  The second attempts uses the <code>fieldset</code> as proposed by the <code>jquerymobile</code>, but, I loose the <code>checkbox</code> and I tried using the css float property, without success.</p>
  
  <p>Here is the full code:</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt; 
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
      &lt;title&gt;Multi-page template&lt;/title&gt; 
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt; 
  &lt;body style="font-size: 12px;"&gt; 
  &lt;div data-role="page" id="one"&gt;
      &lt;div data-role="content"&gt;   
        &lt;div class="ui-grid-a"&gt;
           &lt;div class="ui-block-a" style="width: 20%;" &gt;
              &lt;div class="ui-bar ui-bar-e" style="height:24px; padding: .4em 4px;"&gt;
                 &lt;div class="ui-checkbox"&gt;
                    &lt;label data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-on"&gt;
                        &lt;span class="ui-btn-inner ui-btn-corner-all"&gt;
                        &lt;span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"&gt;&lt;/span&gt;
                        &lt;/span&gt;
                    &lt;/label&gt;
                 &lt;/div&gt;
              &lt;/div&gt;  
           &lt;/div&gt;
           &lt;div class="ui-block-b" style="width: 80%;" &gt;
              &lt;div class="ui-bar ui-bar-e" style="height:24px"&gt;Block B&lt;/div&gt;
           &lt;/div&gt;
         &lt;/div&gt;
  
         &lt;div style="height: 200px;"&gt;
             &lt;fieldset data-role="controlgroup" data-type="horizontal"&gt;
                 &lt;input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0"  class="custom" /&gt;
                 &lt;label for="checkbox-mini-0" &gt;&amp;nbsp&lt;/label&gt;
                 &lt;input type="text" name="texta" id="texta" class="custom" style="width:36px;" /&gt;
             &lt;/fieldset&gt;  
             &lt;div style="height: 30px; border:1px solid lightgray;"&gt;
             &lt;/div&gt;   
             &lt;div style="height: 30px; border:1px solid lightgray;"&gt;
             &lt;/div&gt;      
          &lt;/div&gt;      
     &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help or comments to achieve my goal would be appreciated ?</p>
  
  <p>Online editor: You can access the html file also on <a href="http://jsfiddle.net/alain_lavoie/XhsEh/" rel="noreferrer">http://jsfiddle.net/alain_lavoie/XhsEh/</a></p>