vertically align fontawesome icon to the middle of a textarea

Question

I am using skeleton css framework, I want to vertically align my fontawesome icon to the right of a textarea, but it seems the common "vertical-align:middle; display: table-cell;" doesn't work. I also want when the textarea resizes, the icon still aligns in the middle, without hard code a height inside the style, is it possible?

<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>

Answer 1

You may need to fake it, due to the way skeleton styles its columns.

As such, you can use absolute positioning to offset the icon as necessary:

.six.columns {
  position: relative; /* <-- ensure the icon positions relative to the parent column */
}
#inputA {
  margin-bottom: 0; /* <-- remove the textarea margin, making the icon look like its not centered */
}
.icon {
  position: absolute; /* <-- position the icon */
  /* transform:translateY(-50%); OPTIONAL, use for true vertical alignment */
  top: 50%;
  right: -20px;
}

<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">


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