I have implemented a material ui Typography component, but it's causing a line break even though there is enough space. Here is the code snippet:
<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>
Can anyone help me with displaying both 'Gender' and 'Radio' buttons in the same row? You can check out my codesandbox here