入力ボタンの幅に合わせて入力幅を自動調整する

Question

<form> 
    <input type="text" /> 
    <button>this text can be changed</button>  
</form> 

現在、私はこのようなコードをいくつか持っていますが、ボタン内のテキストは内容に基づいて変更できるので、ボタンと入力バーを動的に変更できます幅は互いに基づいている。 は基本的に、テキストの長さに基づくボタン幅、ボタンの幅に基づく入力バーの幅です。フォームの全体の幅は固定されており、ボタンと入力バーで埋める必要があります。

もJSよりもCSSソリューションを好んでいます。 誰かが私に助けてくれますか？フォームの幅が固定されている場合、と私はTXTがなりたいもの おかげ

Answer 1

シンプルなJavaScriptのCSSで Fiddle Demo

word-wrap: break-word; 

form { 
 
    display: inline-flex; 
 
} 
 

 
input, 
 
button { 
 
    width: 50%; 
 
    word-wrap: break-word; 
 
    box-sizing: border-box; 
 
}

<form> 
 
    <input type="text" /> 
 
    <button>increase text and see the width of input, button</button> 
 
</form>