Html 两个元素在一条直线上拉伸

我试图将textarea和按钮保持在一行中，同时使textarea尽可能水平延伸：

        <div class="col-md-10 form-inline">
            <textarea class="form-control"></textarea>
            <button>small button</button>
        </div>

col上的forminline类将这两个字段都放在一行中，但是，它会缩小textarea。如果我删除表单内联，那么文本区域会拉伸100%——但按钮会出现在下一行

---

是否可以在一行中同时使用宽文本区域？

以百分比为单位设置文本区域的宽度

<div class="col-md-10 form-inline">
 <textarea class="form-control" style="width:90%"></textarea>
 <button>small button</button>
</div>

---

尝试这样做：

.form-inline { position: relative; padding-right: 160px; }
.form-inline > textarea { width: 100%; }
.form-inline > button { width: 150px; height: 35px; position: absolute; top: 0; right: 0; }

---

检查这里。

这也是，但现在遵循一个代码块：

   .form-control{
        display: inline-block;
        width: auto;
    }

---

使按钮相对于文本区域是的，这将是一个选项。但是，由于按钮的宽度是固定的，所以它的总宽度不会达到100%。这看起来很完美，我会试试看！