title: Format a bootstrap inline search form with combined input and select fields
body: <p>I am trying to create a search form similar to the one found on eBay
  <a href="https://i.stack.imgur.com/9r8Eh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9r8Eh.png" alt="enter image description here"></a></p>
  
  <p>using bootstrap. I would like to combine my input and select fields so that they look as the input and select fields in the eBay search bar, but I can't seem to format it to make it look like it.
  This is what I have so far:</p>
  
  <pre><code>&lt;form class="form-inline text-center" style="padding-top:50px" role="form" method="get" action="addauction.php"&gt;
  &lt;fieldset style="padding-top:50px"&gt;
      &lt;!-- Search Name --&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="sr-only" for="item-name"&gt;Product Name&lt;/label&gt;
              &lt;input id="item-name" name="item-name" placeholder="Product Name" class="form-control"&gt;
      &lt;/div&gt;
      &lt;!-- Search Category --&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="sr-only" for="item-category"&gt;Product Category&lt;/label&gt;
              &lt;select id="item-category" name="item-category" class="form-control"&gt;
                  &lt;option selected disabled hidden&gt;Category&lt;/option&gt;
                  &lt;?php
                  $sql = 'SELECT * FROM Category';
                  foreach ($db -&gt; query($sql) as $row) { ?&gt;
                  &lt;option value = "&lt;?php echo $row['category_id']; ?&gt;"&gt;&lt;?php echo $row['category']; ?&gt;&lt;/option&gt;
                  &lt;?php } ?&gt;
              &lt;/select&gt;
      &lt;/div&gt;
      &lt;!-- Search Auction --&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="sr-only" for="submit"&gt;Ready to Submit?&lt;/label&gt;
              &lt;button type="submit" class="btn btn-primary"&gt;&lt;span
                      class="glyphicon glyphicon-search" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And this is how it looks:
  <a href="https://i.stack.imgur.com/HFMuI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HFMuI.png" alt="enter image description here"></a></p>
  
  <p><a href="https://jsfiddle.net/DTcHh/17749/" rel="nofollow noreferrer">https://jsfiddle.net/DTcHh/17749/</a></p>
  
  <p>I have been reading about using input-group but from what I have gathered it makes it way harder to get the selected value. Any help on how to amend my code so that it looks like the eBay search form by only modifying the HTML or CSS would be deeply appreciated.</p>
  
  <p>Thanks in advance!</p>