テキストはテキサリアのボタンの下にあります

Question

私はテキストエリアとボタンが右上に配置されています。テキストがボタン位置に達すると、テキストはその下にとどまります。このボタンを「避ける」テキストが必要です。私はどんな助けもありがとう！ありがとう！
スクリーンショット：https://i.stack.imgur.com/u4klS.png

これはHTMLです：

<div id="textarea-container"> 
    <md-input-container class="md-block"> 
    <textarea id="expandable" rows="3" cols="150"></textarea> 
    <md-button id="textarea-button" class="md-raised"></md-button>  
    </md-input-container> 
</div> 

これはCSSです：

あなたはレイアウト= "行とMD-入力コンテナとMD-ボタンをラップしていないのはなぜ

#textarea-container textarea { 
height: 4em!important; 
transition: all 0.5s ease!important; 
box-sizing: border-box; 
overflow-y: auto; 
resize: none; 
} 

#textarea-container { 
position: relative; 
} 
#textarea-button { 
position: absolute; 
top: 3px; 
right: 0; 
} 

Answer 1

"をクリックし、CSSをtextarea-buttonに移動します。

<div id="textarea-container" layout="row"> 
     <md-input-container class="md-block"> 
      <textarea id="expandable" rows="3" cols="150"></textarea>  
     </md-input-container> 
    <md-button id="textarea-button" class="md-raised"></md-button> 
    </div> 

#textarea-button { 
//remove CSS 
} 

作業jsfiddle、http://jsfiddle.net/cg1e9yy1/ あなたは今ここから行くことができます。