html - 文本位于文本区域中的按钮下方

Question

我在右上角有一个文本区域和一个按钮。当文本到达按钮位置时，它会停留在按钮位置下方。我需要文本来“避免”这个按钮。我将不胜感激任何帮助!谢谢!
截图:/image/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:

#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

为什么不用 layout="row"包装 md-input 容器和 md-button，并移除 textarea-button 的 CSS。

    <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/ 你现在可以从这里开始。