Wrong width for float in Firefox - css

Question

I got the following component:
var Tile = React.createClass({
render: function() {
return (
<div>
{ this.renderToolbar() }
{ this.renderBody() }
</div>
);
},
renderToolbar: function() {
return (
<div className="toolbar">
{ this.props.toolbar }
</div>
);
},
renderBody: function() {
return (
<div className="body">
{ this.renderHeader() }
{ this.renderContent() }
</div>
);
},
renderHeader: function() {
return (
<div className="header">
<button>Bar</button>
</div>
);
},
renderContent: function() {
return (
<div className="content">
{ this.props.children }
</div>
);
}
});
JS fiddle here: https://jsfiddle.net/v0h1omx8/1/ that shows the problem. Simply open it in Chrome and Firefox.
The component behaves as follows:
It can display a header
It can show a toolbar
It shows some content
The width of the content is dynamically adjusted depending on the width of the toolbar
So far so good. In chrome everything works fine. However, in Firefox I get into trouble when I nest the component, and also use it to render the toolbar. Then the component used for the toolbar will always be too narrow.
Do you guys have any idea how I can get firefox to show the toolbar always in the correct width (meaning just stretch the element as wide as it needs to be?)
Any help or hints on how to solve this in a different way are much appreciated.