他の要素がページに動的に追加されている場合、2つのdivを互いに隣り合って修正できますか？

Question

これは構想的ですが、私は複雑な感じがするようなことをしたい：要素を置く（<p>のように別の<p>の隣に固定されている）が、他の要素がページに追加されていても反応する。

ここに私の言いたいことがあります。参考までに、私はBootstrap 4のグリッドを使って2つの列を作成しています。のは、私のHTMLだったとしましょう：

<div class="col-md-9"> 
    <h1>Header</h1> 
    <h3>Ipsum Industries Subheader</h3> 
    <p>This is the left column text</p> 
</div> 

<div class="col-md-3"> 
    <p>This is where I want the text to constantly be next to the <p> element in the left column</p> 
</div> 

は、私は「巣」この第二<p>要素は関係なく、他のコンテンツの直接次の左欄<p>にすることができる方法はありますか？

可能性のある質問

理由だけで絶対位置を使用していませんか？これは、2つのdivを一緒に配置する方法については、多くの回答がlike hereです。これは異なっています - 私がこれについて考えている理由は、Javascriptが最初のdivに要素を追加するアプリケーションを構築していることです。この2番目の要素の固定/絶対位置を使用すると、あとで<h4>が追加された後に混乱するように見えます。

要するに、このような動的な方法で動作する要素間の関係を作成することが可能かどうかを知りたいと思いますか？

グリッドを使用する必要がありますか？いいえ、ブートストラップグリッドを出発点として使用していますが、<p>の前に新しい要素が追加されたときの位置がどのように壊れるかでこの問題が認識されました。私は必要に応じてグリッドを捨てることができます。

Answer 1

あなたの質問を正しく理解していることを前提に、2つの提案があります。

オプションA）

<h1>Header</h1> 
<h3>Ipsum Industries Subheader</h3> 
<div class="row"> 
    <div class="col-md-9"> 
     <p>This is the left column text</p> 
    </div> 

    <div class="col-md-3"> 
     <p>This is where I want the text to constantly be next to the <p> element in the left column</p> 
    </div> 
</div> 

オプションB）

<div class="col-md-9"> 
    <h1>Header</h1> 
    <h3>Ipsum Industries Subheader</h3> 
    <p>This is the left column text</p> 
</div> 
<div class="col-md-3"> 
    <h1>&nbsp;</h1> 
    <h3>&nbsp;</h3> 
    <p>This is where I want the text to constantly be next to the <p> element in the left column</p> 
</div>