Append text with styling-CodePudding

I was wondering how to merge 2 pieces of text together in React JS. Difference is 1 section of the text has its own unique styling. Example code below:

<div>
    <div>
      {'If you haven\'t recieved an email, please check your spam filter or '}
    </div>
    <div style={{ color: 'red' }}>
      try another email address
    </div>
</div>

I have tried using flex and flex direction as row in the parent div, but have had no luck. This is what happens with flex in the parent div.

CodePudding user response：

You could use span (instead of div).

The span tag is an inline container used to mark up a part of a text and it doesn't break to the next line

<div>
  <span>
    {'If you haven\'t recieved an email, please check your spam filter or '}
  </span>
  <span style={{ color: 'red' }}>
    try another email address
  </span>
</div>