Use o espaço disponível para a caixa de texto dentro do contêiner pai - html, css, css3

Eu tenho um contêiner pai, a largura pode ser de 50%, 60% etc. Dentro do contêiner, existem 3 elementos.

1. Etiqueta - deve utilizar a largura de 100%, deve ser a primeira linha.
2. Caixa de texto - Use o espaço disponível dentro do contêiner pai, aqui a largura também pode variar como 50%, 60% etc.
3. Botão seguido por caixa de texto, a largura deve ser 50px.

Quero alcançar o cenário abaixo "s. No cenário abaixo" s, o botão deve estar ao lado da caixa de texto.

1. A largura do contêiner pai pode variar com base nisso, a caixa de texto deve utilizar o espaço disponível.
2. A largura da caixa de texto pode variar, portanto, o botão deve estar ao lado da caixa de texto.

Por favor, veja o anexo para mais clareza. Por favor, ajude-me a corrigir este cenário com apenas css e html, no js.

Desde já, obrigado.

Respostas:

FIDDLE

Você pode dar position:absolute para o seu botão. Então, ele ficará no lado direito do contêiner pai.

CSS será:

.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;
}