如何对齐嵌套在div中的textarea的基线

Question

我使用flex-box创建了一个表，我正在尝试对齐div和textarea的基线。当textarea嵌套在div中时，我无法对齐基线，但是当它不在div中时，它们会根据需要排列。

我的约束是我需要在div（或至少在元素）中接下来的textarea，因为我使用的组件框架要求组件具有根元素（这部分对我的问题并不重要）

那么，如何在保持textarea成为div的同时使对齐工作？这个JSFiddle显示了我的问题：

https://jsfiddle.net/gaor864j/1/

这就是我的结构：

<div class="field">
  <div class="field-key">comments:</div>
  <div class="field-value">
    <div id="annoying">
      <textarea class="text-field long-text-field autosize"
                rows="10"
                style="overflow: hidden; word-wrap: break-word; resize: horizontal;">
        This textarea is surrounded by a div (with id #annoying), which is causing the baseline alignment to not work correctly.
      </textarea>
    </div>
  </div>
</div>

样式：

.field {
  display: flex;
  align-items: baseline;
  flex-flow: row nowrap;
}

.field-key {
  display: flex;
  font-size: 14pt;
  flex-basis: 120px;
}

.field-value {
  display: flex;
  font-size: 14pt;
  flex-grow: 1;
}

textarea, input {
  font-size: 14pt;
}

我遇到的问题：