css inline-block doesn't work in firefox

Question

I have an one column bootstrap table and each cell contains two divs with text and buttons.

in Chrome, cell content is rendered as expected in one row

but in firefox the cell content is rendered "in two rows"

jsfiddle

html

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

javascript

var data = [{"id":"973","email":"usr3@usr3.com"},{"id":"17f","email":"prom3@prom3.com"},{"id":"29e","email":"prom8@prom8.com"}];

class TableRowButtons extends React.Component {

    constructor(props) {
        super(props);

        this._handleDeleteClick = this._handleDeleteClick.bind(this);
        this._handleResetClick = this._handleResetClick.bind(this);
        this._handleEditClick = this._handleEditClick.bind(this);
    }

    _handleDeleteClick(e){
        console.log(e);
    }

    _handleResetClick(e){
        console.log(e);
    }

    _handleEditClick(e){
        console.log(e);
    }

    render() {

        return (
            <div className="row-container">
                <div className="row-text-container">
                    {this.props.cellContent}
                </div>
                <div className="row-buttons-container">
                    <button className="btn btn-danger btn-xs" onClick={this._handleDeleteClick}>Delete</button>
                    <button className="btn btn-warning btn-xs" onClick={this._handleResetClick}>Reset Password</button>
                    <button className="btn btn-info btn-xs" onClick={this._handleEditClick.bind}>Edit</button>
                </div>
            </div>
        );
    }
}

class TestTable extends React.Component{

  constructor(props) {
        super(props);

        this._handleEditClick = this._handleEditClick.bind(this);
        this._handleResetClick = this._handleResetClick.bind(this);
        this._handleDeleteClick = this._handleDeleteClick.bind(this);
        this._handleRowClick = this._handleRowClick.bind(this);
    }

    _handleRowClick(row){
        console.log(row);
    }

  _handleDeleteClick(rowContent){
        console.log(rowContent);
    }

    _handleResetClick(rowContent){
        console.log(rowContent);
    }

    _handleEditClick(rowContent){
        console.log(rowContent);
    }

  render(){

    var that = this;

    function onAfterTableComplete(){

        }

        const options = {
            onRowClick: this._handleRowClick,
            afterTableComplete: onAfterTableComplete
        };

    function rowFormatter(cell, row){
            return <TableRowButtons
                    cellContent={cell}
                    rowContent={row}
                    onDeleteClick={that._handleDeleteClick}
                    onResetClick={that._handleResetClick}
                    onEditClick={that._handleEditClick}
                    />;
        }

     return (
       <BootstrapTable
                    data={data}
                    striped={true}
                    hover={true}
                    condensed={true}
                    pagination={true}
                    search={true}
                    options={options}>
                    <TableHeaderColumn
                        isKey={true}
                        dataField="email"
                        width="200"
                        dataSort={true}
                        dataFormat={rowFormatter}>Email</TableHeaderColumn>
                </BootstrapTable>
     );
  }

}

ReactDOM.render(
  <TestTable />,
  document.getElementById('container')
);

css

.btn-danger {
    margin-right: 0;
  }

  .btn-warning, .btn-info{
    margin-right: 5px;
  }

  td .btn{
    float: right;
  }

  .row-container{
  display: inline-block;
  width: 100%;
  }

  .row-container div{
    display: inline-block;
  }

  .row-buttons-container{
    float: right;
    width: 200px;
  }

Answer 1

The problem I see is the white-space: nowrap;
change it, maybe it will help.

Answer 2

I'm gonna say Firefox is correct on this one.

Let's have a look what you get when you remove the float . You have something like this:

email@example.com
[Edit] [Reset Password] [Delete]

This is because they are <div> elements and as such are blocks.

Then you apply the float:right to the button set. My question is: why do you expect the buttons to move up? They should (and in Firefox, do) only move right.

To get the effect you want, consider having the buttons appear before the email in the HTML source. This will make them float appropriately in all browsers.