私はwhite-space: nowrapanddisplay: inline-blockを使用して 2 つの要素を同じ行に配置し、White-space: normalそれらの要素の内部に設定して、内部のテキストが正常に折り返されるようにしました。
問題は、何らかの理由で、ビューポートの幅が要素の 1 つ (両方ではなく) より小さくなるまで、テキストが折り返されないことです。
これをさらに説明するためにフィドルを作成しました: https://jsfiddle.net/krkb8d9L/1/。ウィンドウを 100px (左端の要素の幅) に縮小する必要があることに注意してください。テキストの折り返しが始まる前に、通常よりも小さくなります。
誰かがなぜこれが起こっているのか説明できますか? ブラウザ間でも一貫しているようです。テキストが収まらなくなるとすぐに折り返しが開始されることは明らかです (たとえば、要素がフロートされた場合のように)。