How can I get this css to display correctly in Chrome?

[lonster]

I have the following simple code:\[code\]<div style="float:right"> <h2>Header <div style="float:right;background-color:red">my text</div></h2> More text</div>\[/code\]See this fiddleThis displays the way I want it to in Firefox and IE - with the "my text" showing up to the right of "Header" on the same line. However, in Chrome, the "my text" gets pushed down a line, next to "more text". I know that I can get this to work by moving the "my text" div before the "header" text:\[code\]<h2><div style="float:right;background-color:red">my text</div>Header</h2>\[/code\]But for other reasons, I need to keep the html the way it is and would like to accomplish this using css if possible. Is there any way to get this to display the way I want it in Chrome (just by changing the css)?