jsx not working
You could simply wrap it with Fragment
:
<Fragment> </Fragment>
Write your jsx
code wrapped in {
}
as shown below.
<h1>Code {' '}</h1>
You can put space or any special character here.
e.g in your case
Select Takeout Scenario:
should be like this
Select Takeout Scenario:{' '}
It will work.
As Advice you should not use  
to add extra space, you can use css to achieve same.
{'\u00A0'}
works but is hard to read, so I wrapped it in a function component:
components/nbsp.js:
export default () => '\u00A0';
usage:
Hello<Nbsp />world
See: JSX In Depth
Try:
Select Scenario:{'\u00A0'}
Or:
<div dangerouslySetInnerHTML={{__html: 'Select Scenario: '}} />
Or:
<div> </div>
jsfiddle
Update
After seeing some of the comments, and trying it out. It has come to my attention that using html entites inside JSX works fine (unlike what is stated in the above jsx-gotchas reference [maybe it's outdated]).
So using something like: R&D
, would output: 'R&D'.
There is a weird behavior with
, which causes it to render differently, thus causing me to think it doesn't work:
<div>This works simply:- -</div>
<div>This works simply:- {'\u00A0'}-</div>
Produces:
This works simply:- -
This works simply:- -