Search code examples
javascriptcssreactjsuser-interfacestyled-components

How to align a link in the middle of a paragraph?

I have been struggling with adding a link with the text 'here' to flow inline with the entire paragraph. Essentially what I would like to do is

'Gibberish here detailing the required steps.'

How can I accomplish this so as to have everything in a single line? I have tried doing this but it gives me the results attached in the screenshot.

          <Flex direction="column" gap="s">
          GIBBERISHH{" "}
          <Anchor
            href=""
            trackingId=""
            label="Read the Walkthrough"
          />
          detailing the required steps.
        </Flex>

enter image description here

Edit: Also tried changing the Flex direction to a row but I get this result which is not what I need either. Any suggestions would be great!

enter image description here

Solution

  • Why not a "p" tag if it's a paragraph:

        <p>
          GIBBERISHH{" "}
          <Anchor
            href=""
            trackingId=""
            label="Read the Walkthrough"
          />
          detailing the required steps.
    </p>