inline-block改行について

実現したいこと

1. <div class="smple">全体中央寄せ
2. <p>文字左寄せ
3. <span>改行をinline-blockでやりたいです

┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
html

<div class="sample"> <p> ※左寄せ文〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜、 <span>画面幅によってここから切り替えしたい。</span> </p> <p> ※左寄せ文〜〜〜〜〜〜〜。 ※左寄せ文〜〜〜〜〜〜〜〜〜〜〜〜、 <span>ここ切り替えしたい</span>〜〜。 </p> <div>

┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
css

.sample { width:100% text-align: center; margin: 0 auto; padding: 0 10px; } .sample p { display: inline-block; text-align: left; } .sample p span{ display: inline-block; }

全体中央寄せ 文字左寄せ

この段階で、pにinline-blockを使っているから
spanでさらにinline-blockを使うからうまくいかないのでしょうか？

現在、左寄せにしかなってない状況です。

これを叶えるやり方があれば教えていただきたいです！

┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈

<br>使いたくない理由：画面サイズによって変な改行が引き起こされる
（例）
文〜〜〜〜〜〜〜〜〜
〜、
<br> <span>※の文</span>