title: Archieve a Header and "Sub-Header" with jQuery Mobile
body: <p>I am failing to correctly organize jQuery Mobile components in the following way:</p>
  
  <p><img src="https://i.stack.imgur.com/742a6.jpg" alt="Modified Screenshot"></p>
  
  <p>I was trying to build this fixed searchbar, but after many attemps I ended up here, asking for help.</p>
  
  <pre><code>&lt;div data-role="header" data-position="fixed" data-theme="b"&gt;
          &lt;a data-role="button" class="ui-btn-lft" href="#pgIndex" data-icon="arrow-l" data-theme="b"&gt;Back&lt;/a&gt;
          &lt;h1&gt;Title&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="header" data-theme="b" id="second-header"&gt;
          &lt;div style="float:left; width: 75%;"&gt;
              &lt;select name="selCombo1" id="selCombo1" data-mini="true"&gt;
                  &lt;option value="0"&gt;Option 0 - All&lt;/option&gt;
              &lt;/select&gt;
              &lt;span style="margin-bottom: 3px;"&gt;&lt;/span&gt;
              &lt;select name="selCombo2" id="selCombo2" data-mini="true"&gt;
                  &lt;option value="0"&gt;Option 0 - All&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div style="float:right; width: 25%;"&gt;
              &lt;a data-role="button" data-mini="true" data-icon="search" data-iconpos="top" data-rel="back"&gt;Search&lt;/a&gt;     
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Is there a simple way to archieve this?</p>
  
  <p>The complete code is on jsFiddle:
  <a href="http://jsfiddle.net/mbarni/rjdt2/" rel="nofollow noreferrer">http://jsfiddle.net/mbarni/rjdt2/</a></p>