How to display text and component text on same line

Question

I have a div that has some text and then a component that displays some more text:

   <div className="text-center">
      Sign-in or <SignUpLink />
    </div>

I want it to display the text inline like so:

Sign in or Create an account

But instead it is displaying like so:

Sign-in or

Create an account

How can I fix this?

Answer 1

Give SignUpLink a display: inline style.

const SignUpLink = () => {
  <div style={{ display: 'inline' }}>
    // rest of component
  </div>
}