I'm having an issue with my typography components appearing on the same line instead of two separate lines. I've tried various methods to fix it but nothing seems to work.
<div class="center">
<Typography variant="h1" style={{flexGrow: 1}} gutterBottom>line 1</Typography>
<Typography variant="h6">line 2</Typography>
</div>
Despite my efforts, both line 1 and line 2 are displaying on the same line.
Here is the CSS code for center:
.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 500px;
}