CSS のみを使用して、親コンテナーに幅を与えずに、右フローティング要素が左揃えの兄弟テキストをクリアしないように強制しようとしています。親はブロック レベルですが、フローティングです。基本的に、コンテナーは常に、テキスト ノードと 1 行に収まるように可能な限り最小の幅<div>である必要があり、実際には 1 行でレンダリングする必要があります。
たとえば、divここで右にフロートすると、常にテキスト ノードの下の行にジャンプします。
#demo {float:left;border:solid 1px blue;}
#demo div {float:right;border:solid 1px green;}
<div id="demo">
Text Node!
<div>right-floated</div>
</div>
大きな制約は、HTML をまったく変更できないこと<span>です。テキスト ノードの周りにタグを追加することはできません。また、テキスト ノードが 2 番目になるように順序を切り替えることもできません。順番を入れ替えれば解決します。
もう 1 つは、コンテンツの幅が大きく異なるため、含まれる要素の幅を指定したくないということです。これは CSS だけではできないかもしれませんが、誰かが素晴らしいトリックを持っているかどうかを知りたかっただけです。