title: Material-UI Grid baseline alignment for Button, ButtonGroup and Typography
body: <p>I've spent two days trying to achieve a simple goal: align all text on the baseline in this layout. Tried a dozen of <code>alignItems</code> combinations on Grid elements, nothing worked.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;My page&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" /&gt;
      &lt;script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;!-- Fonts to support Material Design --&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap" /&gt;
      &lt;!-- Icons to support Material Design --&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
      &lt;script type="text/babel"&gt;
  const {
    Grid,
    Button,
    ButtonGroup,
    Typography
  } = MaterialUI;
  
  function App() {
    return (
      &lt;Grid container style={{ borderWidth: '1px', borderStyle: 'solid' }} justify="space-between"&gt;
        &lt;Grid item xs={2}&gt;
          &lt;Button variant="outlined"&gt;Could&lt;/Button&gt;
        &lt;/Grid&gt;
        &lt;Grid item xs&gt;
          &lt;Grid container spacing={1}&gt;
            &lt;Grid item&gt;
              &lt;Typography variant="h4"&gt;You&lt;/Typography&gt;
            &lt;/Grid&gt;
            &lt;Grid item&gt;
              &lt;ButtonGroup&gt;
                &lt;Button variant="outlined"&gt;align&lt;/Button&gt;
                &lt;Button variant="outlined"&gt;this?&lt;/Button&gt;
              &lt;/ButtonGroup&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    );
  }
  
  ReactDOM.render(
    &lt;App /&gt;,
    document.querySelector('#root'),
  );
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>