CSS 文本域和按钮对齐不一致解决方案

<div class="form">
  <div class="form-group">
    <label for="content">内容</label>
    <div class="form-input">
      <textarea id="content"></textarea>
      <button>提交</button>
    </div>
  </div>
</div>

<style>
.form {
  width: 100%;
}

.form-group {
  display: table;
  width: 100%;
}

label {
  display: table-cell;
  text-align: right;
  width: 100px;
  padding-right: 10px;
  vertical-align: middle;
}

.form-input {
  display: table-cell;
  width: 100%;
}

textarea {
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

button {
  padding: 10px;
}
</style>

.form-input {
  position: relative;
}

textarea,
button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}

textarea {
  padding: 10px;
  box-sizing: border-box;
}

button {
  padding: 10px;
}