如何避免排版中的换行

Question

I have a material ui Typography which is giving line break even though space is there, Below is the code

  <Box flexDirection="row">
  <Typography>
    Gender:
    <RadioGroup
      row
      aria-label="gender"
      name="gender1"
      value={value}
      onChange={handleChange}
    >
      <FormControlLabel value="female" control={<Radio />} label="Female" />
      <FormControlLabel value="male" control={<Radio />} label="Male" />
      <FormControlLabel value="other" control={<Radio />} label="Other" />
    </RadioGroup>
  </Typography>
</Box>

How to display 'Gender' and 'Radio' buttons both in one row. Here is my codesandbox Link

Answer 1

You can use Grid within Box

<Box flexDirection="row" >
      <Grid container direction="row"
      justify="space-evenly"
       alignItems="center">
         <Grid item>
           <Typography>
             Gender:
           </Typography>
         </Grid>
         <Grid item>
           <RadioGroup
              row
              aria-label="gender"
              name="gender1"
              value={value}
              onChange={handleChange}> 
             <FormControlLabel value="female" control={<Radio />} label="Female" />
             <FormControlLabel value="male" control={<Radio />} label="Male" />
             <FormControlLabel value="other" control={<Radio />} label="Other" />
           </RadioGroup>
         </Grid>
        </Grid>          
    </Box>

codesandbox link