title: Using Material-ui for creating an inline form with label,text, select and button elements (similar to Boostrap)
body: <p>I am struggling to create an inline form using <code>Material-UI</code> and <code>React</code> which resembles the following</p>
  <p><a href="https://i.stack.imgur.com/SiOW3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SiOW3.png" alt="enter image description here" /></a></p>
  <h2>Bootstrap HTML snippet</h2>
  <p>I created the above using the HTML snippet below. You can try this out at <a href="https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_inline&amp;stacked=h" rel="nofollow noreferrer">W3Schools</a>.</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;h2&gt;Inline form&lt;/h2&gt;
    &lt;p&gt;Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.&lt;/p&gt;
    &lt;form class=&quot;form-inline&quot; action=&quot;/action_page.php&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;label for=&quot;sel1&quot;&gt;Select search field:&lt;/label&gt;
        &lt;select class=&quot;form-control&quot; id=&quot;sel1&quot;&gt;
          &lt;option&gt;FirstName&lt;/option&gt;
          &lt;option&gt;LastName&lt;/option&gt;
          &lt;option&gt;PostCode&lt;/option&gt;
          &lt;option&gt;Gender&lt;/option&gt;
        &lt;/select&gt;    
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;email&quot; placeholder=&quot;Enter search pattern&quot; name=&quot;email&quot;&gt;
      &lt;/div&gt;
      &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  </code></pre>
  <h2>My attempt using Material-ui</h2>
  <p><a href="https://i.stack.imgur.com/jOOL8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jOOL8.png" alt="enter image description here" /></a></p>
  <pre><code>                &lt;label htmlFor=&quot;selectsearchfield&quot;&gt;Select search fields&lt;/label&gt;
                  &lt;span&gt;&amp;nbsp;&amp;nbsp;&lt;/span&gt;
                  &lt;NativeSelect id=&quot;selectsearchfield&quot; value={{}}&gt;
                      &lt;option value=&quot;FirstName&quot;&gt;FirstName&lt;/option&gt;
                      &lt;option value=&quot;LastName&quot;&gt;LastName&lt;/option&gt;
                  &lt;/NativeSelect&gt;
  
                  &lt;span&gt;&amp;nbsp;&amp;nbsp;&lt;/span&gt;
                  &lt;TextField
                          label=&quot;&quot;  id=&quot;outlined-size-small&quot; defaultValue=&quot;&quot; variant=&quot;outlined&quot; size=&quot;small&quot; disableUnderline /&gt;
                  &lt;span&gt;&amp;nbsp;&amp;nbsp;&lt;/span&gt;
                  &lt;Button size=&quot;medium&quot; variant=&quot;contained&quot; color=&quot;primary&quot;&gt;Search&lt;/Button&gt;
  
  
  </code></pre>
  <h2>Question</h2>
  <p>It can be clearly seen that the output from Bootstrap is far more professional.
  Please, any suggestions on how to improve the inline form using Material UI look n feel so that it comes close to Bootstrap.</p>
  <p>Thank you,</p>
  <p>Sau</p>