0

I learn React and now I tried in various way to get this to work from reading Stackoverflow question and also the html div doc

As the image show the text and link should be in a straight line not vertically stacked

enter image description here

Can someone help me with this or suggest some reading I can do to learn this maybe

<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>
Giorgi Moniava
  • 27,046
  • 9
  • 53
  • 90
Kid
  • 1,869
  • 3
  • 19
  • 48

1 Answers1

1

Did you try this?

...
 I have read the
            <span role="article">
                <a target="_blank" rel="noreferrer" href="http://greta.portplays.com/Privacy%20Policy.html">
                    Privacy Policy
                </a>
            </span>

But since a is an inline element this would work without the span too. You can read a bit more on inline and block elements in css.

Giorgi Moniava
  • 27,046
  • 9
  • 53
  • 90