CSS divは反応しないで応答します

Question

私はお互いに隣に2つのコンテナを持っています。もう1つは、線形に整列された要素のリストを次々と含むことになります。他のボタンにはボタンが1つだけ含まれています。

[[...] [...] [...]] [ボタン]ボタンが非変化を持たなければならないのに対し、

は私が応答左のコンテナをしたいのですが幅。そして、すべての場合において、彼らは同じ行にとどまる必要があり、ボタンは他の要素の下に落ちることができません。

しかし、私はこれを達成できません。私はこれをどのようにして行うのか、ボタンが反対側にあるという例をたくさん見つけましたが、これをもっと難しくしています。

<div class="left"> 
    <p>In case we are</p> 
    <p>too long</p> 
    <p>one will be removed due</p> 
    <p>to overflow!</p> 
</div> 
<div class="right"> 
    <button>Submit</button> 
</div> 

もう一つは、私はボタンが画面の完全な権利になりたいということです。

は、ここでHTMLがどのように見えることができるものの例です。そうではないので、それは最初の要素の単なる拡張です。クラスが左に余白があることを意味する：0px;クラス右余白 - 右：0px;右：0;

私はこれが重複していないことを望みますが、私の場合の実際の例は見つかりませんでした。しかし、それを正確に周りに行うための多くの。

EDIT
は、ここに私の.cssコードは、誰かが私がめちゃくちゃにされてきたものを見てしたい場合には、今です。

.right { 
    position: absolute; 
    margin-top: 2px; 
    display: inline-block; 
    margin-right: 3px; 
    right: 0; 
} 
.left { 
    margin-top: 2px; 
    position: absolute; 
    display: inline-block; 
    margin-right: 10px; 
    border: 1px solid black; 
    overflow: hidden; 
} 

しかし、ええ、これは、要素がいくつかの点で、彼らはので、左要素内のコンテンツのオーバーラップを開始し、初めに右の場所を見つけるも、という問題がある...

Answer 1

フレキシボックスそれを行うことができます。

* { 
 
    box-sizing: border-box; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.left { 
 
    flex: 1; 
 
    display: flex; 
 
    padding: .25em 
 
} 
 
.left p { 
 
    flex: 1; 
 
    border: 1px solid grey 
 
} 
 
.right { 
 
    flex: 0 0 auto; 
 
    padding: 0 0.25em; 
 
    border: 1px solid grey; 
 
}

<div class="wrapper"> 
 
    <div class="left"> 
 
    <p>In case we are</p> 
 
    <p>too long</p> 
 
    <p>one will be removed due</p> 
 
    <p>to overflow!</p> 
 
    </div> 
 
    <div class="right"> 
 
    <button>Submit</button> 
 
    </div> 
 
</div>