Reactでinline-blockの横並びにならない

Question

divを横並びにしたいのですがinline-blockでなりませんでした。なぜでしょうか？

App.jsx

function App() {

    return (
        <div className="App">
            <p>text</p>
            <div style={{display: 'inline-block'}}>
                <div>block</div><div>block</div>
            </div>
        </div>
    );
}