Materialize.css column not scaling to full row height

I'm using React.js, Materialize.css and some MaterialUI components together for creating a website.

I've created a header (React component, basic div with title and logout button) for my site using a Materialize.css "grid".

Problem: I use this react component in 2 different places. In place 1, the height of the column is the same as the row. In place 2, the height of the column is half of the height of the row.

Here's the code:

The react component that is a header

export class Header extends React.Component {
constructor(props) {
    super(props)

}

render() {
    let logoutBtn = <div className="col s2 offset-s2">
        <FlatButton href="/logout/" backgroundColor="#ffffff" hoverColor="#d7d7d7" label="LOGOUT" />
    </div>

    if (this.props.hideLogoutButton) {
        logoutBtn = null
    }

    return (
        <nav className="top-nav">
            <div className="row">
                <div className="col s5 offset-s2">
                        <a className="page-title">{this.props.title}</a>
                </div>
                {logoutBtn}
            </div>
        </nav>
    )
}
}

Usage in place 1

class Main extends React.Component {
render() {
    return (
        <div>
            <header>
                <Header title="Inspection" />
                <SideBar infolder={true}/>
            </header>
            <div className="content">
                <InspectionSearchView />
            </div>
        </div>
    )
}
}

Result in place 1 result1

Usage in place 2

class Main extends React.Component {
render() {
    return (
        <div>
            <header>
                <Header title="Portfolio" />
                <SideBar infolder={true}/>
            </header>
            <div className="content">
                <PortfolioSearchView />
            </div>
        </div>
    )
}
}

Result in place 2 result2