JavaScript CSS transform translateX

Question

前提・実現したいこと

transform translateXを使い片側のdivを動かした場合に隣接するdivも移動させたいのですが、
うまく動きません
position:absoluteは使いたくありません

下記ソースを見ていただけますでしょうか
赤色のボックスをずらしても青色が動くことはありません
position:absoluteとすれば青色も動きだします

position:absolute以外で動き出す方法はありませんでしょうか

赤色が移動した分青色を詰めるやり方が知りたいです
よろしくお願いいたします

該当のソースコード

<style>
body,html{
height:100%;
margin:0;
}
</style>


<input type="button" value="Click" onclick="obj.style.transition='all 0.5s ease-in-out';obj.style.transform='translateX(-100%)';">

<div id="obj" style="width:100%;height:100%;background:red;float:left"></div>
<div style="width:100%;height:100%;background:blue;float:left"></div>

Answer 1

座標空間を編集することで、 CSS 変形 (transform) は通常のフロー処理を混乱させずに、影響下にあるコンテンツの位置を変えることができます。

CSS 変形の使用 - CSS: カスケーディングスタイルシート | MDN

とあります。
つまり、transformは他の要素のレイアウトに影響を与えませんので、お考えになっている方法は諦めた方がいいのではないかな、と思います。

代わりに、マージンを操作する、2つの要素をラップしてラッパー要素を変形する、などの方法があるのではないかと思います。

Answer 2

片側のdivを動かした場合に隣接するdivも移動させたいのですが

「隣接するdivにも同様に移動の指定を入れる」という素直な方法があるかと思います。