親コンテナ内のテキストボックスに使用可能なスペースを使用する - html、css、css3

親コンテナがあります。幅は50％、60％などです。 コンテナの中には、3つの要素があります。

1. ラベル - 100％幅を使用する必要があります。最初の行にする必要があります。
2. テキストボックス - 親コンテナ内の利用可能なスペースを使用します。ここでも幅は50％、60％などのように変化します。
3. テキストボックスが続くボタンは、幅が50ピクセルになるはずです。

以下のシナリオを達成したいのですが。ボタンはテキストボックスの隣になければなりません。

1. 親コンテナの幅はそれに基づいて変わる可能性があります。テキストボックスは利用可能なスペースを利用する必要があります。
2. テキストボックスの幅は変えることができるので、ボタンはテキストボックスの横にあるはずです。

より明確にするために添付ファイルを見てください。 このシナリオをcssとhtmlのみで修正し、jsを修正しないでください。

前もって感謝します。

回答：

フィドル

あなたは与えることができます position:absolute あなたのボタンに。そう、それは親コンテナの右側に固執します。

CSSは次のようになります。

.parent {
margin: 20px;
border: 1px solid #CCC;
width: 50%;
position: relative;
}
.parent label {
display: block;
}
.parent [type="button"] {
position:absolute;
width:30px;
height:30px;
bottom:0px;
right:0px;
}
.parent [type="text"] {
width:100%;
border:1px solid #CCC;
padding:6px 10px;
box-sizing:border-box;
}