title: Multiple buttons and search placement in header for jQuery Mobile?
body: <p>I am trying to add a search input and three buttons on the same line in jQuery Mobile, but it is turning out to be really frustrating. Here is the code I am trying:</p>
  
  <pre><code>&lt;div data-role="header" class="header"&gt;
      &lt;input type="search" name="search" id="search-header" value="" data-mini="true" data-inline="true" data-theme="c" /&gt;
      &lt;a href="#menu_page" data-role="button" data-icon="search" data-iconpos="notext"&gt;Search&lt;/a&gt;
      &lt;a href="#menu_page" data-role="button" data-icon="grid" data-iconpos="notext" data-rel="dialog"&gt;View&lt;/a&gt;
      &lt;a href="#menu_page" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-rel="dialog"&gt;Menu&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With a CSS of this:</p>
  
  <pre><code>.page .header .ui-input-search
  {
      margin-right: 90px;
  }
  </code></pre>
  
  <p>I am ok with using the default icons that come with JQM, but the placement ends up looking like this though:</p>
  
  <p><img src="https://i.stack.imgur.com/IGOfG.png" alt="enter image description here"></p>
  
  <p>I even tried putting a controlgroup around the buttons only and also around the buttons and input box, but put the buttons below the search box.</p>
  
  <p>How would I achieve this in JQM?</p>