After learning React, I have attempted in various ways to get this code snippet to work. I referred to a question on Stackoverflow as well as the HTML div documentation
The goal is to have the text and link displayed in a horizontal line, not vertically stacked like shown in the image below:
https://i.sstatic.net/0plSo.png
If anyone could provide assistance or recommend further reading materials for mastering this concept, it would be greatly appreciated.
<Box alignItems="center" display="flex" ml={-1}>
<Checkbox checked={values.policy} name="policy" onChange={handleChange} />
<Typography color="textSecondary" variant="body1">
I have read the
<div role="article">
<a target="_blank" rel="noreferrer" href="http://greta.portplays.com/Privacy%20Policy.html">
Privacy Policy
</a>
</div>
</Typography>
</Box>
<Box alignItems="center" display="flex" ml={-1}>
<Checkbox checked={values.policy} name="Terms" onChange={handleChange} />
<Typography color="textSecondary" variant="body1">
I have read the
<div role="article">
<a target="_blank" rel="noreferrer" href="http://greta.portplays.com/Terms%20of%20Service.html">
Terms and Conditions
</a>
</div>
</Typography>
</Box>