title: Material ui / typography and button on the same line
body: <p>I am struggling to align a button and a <code>&lt;Typography&gt;</code> component on the same line:</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>&lt;Grid item lg={12} md={12} sm={12} xs={12} className={classes.register}&gt;
      &lt;Typography noWrap className={classes.typoText} variant="subtitle2"&gt;
          text1
      &lt;/Typography&gt;
  
      &lt;ButtonBase className={classes.labelForgot} disableFocusRipple="false" disableRipple="false" centerRipple="false"&gt;
          &lt;Typography noWrap className={classes.labelForgot} variant="subtitle2"&gt;
              text2
          &lt;/Typography&gt;
      &lt;/ButtonBase&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>My styles:</p>
  
  <pre><code>labelForgot: {
      color: 'rgba(20, 176, 12,0.9)',
      backgroundColor: 'transparent',
      paddingLeft: 2,
      '&amp;:hover': {
          color: 'rgb(57, 232, 48)',
          backgroundColor: 'transparent',
      }
  },
  root: {
      backgroundSize: 'cover', 
      backgroundPosition: 'center center',
      backgroundRepeat: 'no-repeat',
      minHeight: '100vh',
      justifyContent:'center', 
      overflow: 'hidden',
  },
  gridMain: {
      margin: '0 auto',
      maxWidth: 300,
  },
  </code></pre>
  
  <p>Basically I have a <code>&lt;div&gt;</code> that allows a height of ´100%`.</p>
  
  <p>For the container I use css grid main.</p>
  
  <p><a href="https://i.stack.imgur.com/guZGS.png" rel="nofollow noreferrer">Here is the result</a></p>