title: Need help dealing with spacing issue in MaterialUI Dialog Content
body: <p>Im trying to have a summary page and using a MUI Dialog to acheive this.</p>
  <p>This is the dialog I have:
  <img src="https://i.stack.imgur.com/erhVo.png" alt="This" /></p>
  <p>But I am trying to make the two sides line up at the top instead of there being space above &quot;Title 2&quot;. It seems that the Typographys are added from the bottom up starting with the last one in each div. The JSX Im using is:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;Dialog className={classes.dialog} open={open} fullWidth maxWidth=&quot;md&quot;&gt;
    &lt;DialogTitle disableTypography className={classes.dialogTitle}&gt;
      &lt;Typography align=&quot;center&quot; variant=&quot;h5&quot;&gt;
        Summary
      &lt;/Typography&gt;
    &lt;/DialogTitle&gt;
    &lt;DialogContent dividers&gt;
      &lt;div
        className={
          booleanVar === true ? classes.test1 : classes.test3
        }
      &gt;
        &lt;Typography
          align=&quot;center&quot;
          variant=&quot;h6&quot;
        &gt;{`Title 1`}&lt;/Typography&gt;
        &lt;Typography align=&quot;left&quot; variant=&quot;h6&quot;&gt;{`Three`}&lt;/Typography&gt;
        &lt;Typography align=&quot;left&quot; variant=&quot;h6&quot;&gt;{`Line`}&lt;/Typography&gt;
        &lt;Typography align=&quot;left&quot; variant=&quot;h6&quot;&gt;{`Email:`}&lt;/Typography&gt;
      &lt;/div&gt;
      {booleanVar === true ? (
        &lt;div className={classes.test2}&gt;
          &lt;Typography
            align=&quot;center&quot;
            variant=&quot;h6&quot;
          &gt;{`Title 2`}&lt;/Typography&gt;
          &lt;Typography variant=&quot;h6&quot;&gt;{`Two Line`}&lt;/Typography&gt;
          &lt;Typography variant=&quot;h6&quot;&gt;{`Example`}&lt;/Typography&gt;
        &lt;/div&gt;
      ) : null}
    &lt;/DialogContent&gt;
  &lt;/Dialog&gt;
  </code></pre>
  <p>Additionally, the CSS is:</p>
  <pre class="lang-css prettyprint-override"><code>const useStyles = makeStyles((theme) =&gt; ({
    dialog: {
      borderRadius: &quot;10px&quot;,
      height: &quot;auto&quot;,
      justifyContent: &quot;center&quot;,
      margin: &quot;auto&quot;,
      width: &quot;auto&quot;
    },
    dialogTitle: {
      padding: &quot;6px 24px 16px 24px&quot;,
      textAlign: &quot;center&quot;
    },
    test1: {
      width: &quot;49%&quot;,
      margin: &quot;auto&quot;,
      textAlign: &quot;left&quot;,
      display: &quot;inline-block&quot;,
      paddingRight: &quot;5px&quot;
    },
    test2: {
      width: &quot;49%&quot;,
      margin: &quot;auto&quot;,
      textAlign: &quot;center&quot;,
      display: &quot;inline-block&quot;,
      borderLeft: &quot;0.1em solid #e0e0e0&quot;,
      paddingLeft: &quot;5px&quot;
    },
    test3: {
      width: &quot;100%&quot;,
      margin: &quot;auto&quot;,
      textAlign: &quot;center&quot;,
      display: &quot;inline-block&quot;
    }
  }));
  </code></pre>
  <p>If anyone knows a solution with the CSS thats what Id prefer but I am open to any working solution!</p>