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>
    );
}

Answer 1

横並びにしたいそれぞれのdivに対してdisplay: inline-blockを適用する必要があります。
普通のHTMLで書くとこうです。

<div>
   <div style="display: inline">block</div>
   <div style="display: inline">block</div>
</div>

従って、下記のようにすれば横並びになります。

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

Answer 2

失礼しました。CSSのdisplayプロパティでブロック要素とインライン要素のどちらとして扱うか設定できるようですね。

display - CSS: カスケーディングスタイルシート | MDN

回答は取り消します。

divはブロックレベル要素なので、横並びにはできません。

ブロックレベル要素 - HTML: HyperText Markup Language | MDN

ブロックレベル要素は常に新しい行から始まり、利用可能な全幅を取ります (できる限り左右に伸びます)。

インライン要素をお使いください。

インライン要素 - HTML: HyperText Markup Language | MDN

インライン要素は新しい行から始まらず、必要な幅のみを占有します。