How to make an app bar using React & Material-UI like this?
<p>How do I make an app bar that looks like this: <a href="https://i.stack.imgur.com/6544O.png" rel="nofollow"><img src="https://i.stack.imgur.com/6544O.png" alt="enter image description here"></a></p>

<p>I can create the top half of the app bar with the search box but I'm having trouble adding the bottom half. This is my code so far:</p>

<pre><code>      &lt;AppBar
        style={{backgroundColor: MuiTheme.palette.primary1Color, flexWrap: 'wrap'}}
        showMenuIconButton={false}
        title={explorerSearch}
        titleStyle={MuiTheme.title}
        iconClassNameRight='muidocs-icon-navigation-expand-more'
      &gt;
        &lt;Toolbar&gt;
          &lt;ToolbarGroup&gt;
            {this._getContent()}
          &lt;/ToolbarGroup&gt;
        &lt;/Toolbar&gt;
      &lt;/AppBar&gt;
</code></pre>

<p>This is what the output looks like: <a href="https://i.stack.imgur.com/RtMK0.png" rel="nofollow"><img src="https://i.stack.imgur.com/RtMK0.png" alt="enter image description here"></a></p>

<p>I'd like the "TEXT" to show up in a new line below the search bar. How do I do that?</p>