Box component inserting text to 'start' and 'end'-CodePudding

I am using material UI components and I'm trying to make a card component. I want my text will be in the same row inbox component("phase" and "2" have to be in the same row). However, I couldn't do it. Here is my code;

 <Card className={classes.rootMultiple} variant='outlined'>
  <CardContent>
    <Box>
      <Box justifyContent={'start'}>
        <Typography
          variant='h5'
          component='h2'
          className={classes.titleMultiple}
        >
          phase
        </Typography>
      </Box>

      <Box display='flex' justifyContent={'end'}>
        <Typography
          variant='h7'
          component='h2'
          className={classes.descriptionMultiple}
        >
          2
        </Typography>
      </Box>
    </Box>
  </CardContent>
</Card>;

CodePudding user response：

You can just write a Grid (that uses flex) with justify-content: space-between.

<Card className={classes.rootMultiple} variant='outlined'>
  <CardContent>
    <Grid container justifyContent="space-between">
      <Grid item>
        <Typography
          variant='h5'
          component='h2'
          className={classes.titleMultiple}
        >
          phase
        </Typography>
      </Grid>
      <Grid item>
        <Typography
          variant='h7'
          component='h2'
          className={classes.descriptionMultiple}
        >
          2
        </Typography>
      </Grid>
    </Grid>
  </CardContent>
</Card>

No need to make other components; less is better. Of course you can use Box with flex style, but Grid does it for you.

Note that h7 isn't a valid value for variant inside Typography.

EDIT: I wrote space-between only because your example prints the texts in the margins, but of corse you can use what you want: they will be always in same row.

CodePudding user response：

Try to specify the display and flexDirection attributes in the parent's Box. Then use the flex attribute on the children's `Box:

 <Card className={classes.rootMultiple} variant='outlined'>
  <CardContent>
    <Box sx={{
          display: 'flex',
          flexDirection: 'row',
        }}>
      <Box flex={1}>
        <Typography
          variant='h5'
          component='h2'
          className={classes.titleMultiple}
        >
          phase
        </Typography>
      </Box>

      <Box flex={0}>
        <Typography
          variant='h7'
          component='h2'
          className={classes.descriptionMultiple}
        >
          2
        </Typography>
      </Box>
    </Box>
  </CardContent>
</Card>