css - fontawesome アイコンをテキストエリアの中央に垂直に揃えます

Question

私はスケルトンCSSフレームワークを使用しています.fontawesomeアイコンをテキストエリアの右側に垂直に揃えたいのですが、一般的な「vertical-align:middle; display: table-cell;」のようです。動作しません。また、テキストエリアのサイズが変更されたときに、スタイル内の高さをハードコーディングせずに、アイコンが中央に配置されたままになりたいのですが、可能ですか?

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


<style type="text/css">
.icon {
margin-left: 1em;
vertical-align: middle;
display: table-cell;
}
</style>

<div class="row">
  <div class="six columns">
    <label for="inputA">labelA</label>
    <textarea class="u-full-width" id="inputA" type="text"></textarea>
  </div>
  <div class="one colum">  
    <span class="icon"> <i class="fa fa-check-circle"></i> </span>
  </div>
</div>