ブロック要素内で2つのインライン要素をfloatで右と左に寄せるとウィンドウ幅を狭めた時に改行されてしまうのを防ぎたい

Question

下記コードで，左右に要素を寄せた状態でウィンドウ幅を狭めた時に，改行されるのではなく重なるようにしたいですがどうすれば良いでしょうか．
white-space:nowrap;をブロック要素のほうに指定してもうまくいきませんでした．

<div>
    <span style="float:left;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    <span style="float:right;">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>
</div>

Answer 1

position: absolute;で絶対配置すればどうでしょう。

div {
  position: relative;
}

div > span:last-child {
  position: absolute;
  right: 0;
}

Comments

[think49]

試したら縦に並んでしまいました(間違いでしたので、下記で訂正)。
https://jsfiddle.net/drgmq4w3/

(2021/02/28 14:26追記)
floatの記述が残っていたので削除したら、横並びになりました。
重なるんですね。

Answer 2

幅に条件がないので、適当に幅を決めました。

• width: 50% - JSFiddle - Code Playground

<style>
#sample>.foo {
  float: left;
  width: 50%;
  word-wrap: break-word;
}
</style>
<div id="sample">
  <div class="foo">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class="foo">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>

Re: abroad128 さん

Comments

[think49]

ああ、重なるとはそういうことか。
この回答は忘れてください。