title: vertically align span in bootstrap row
body: <p>I have a bootstrap div with "row" class, and 2 divs inside acting as columns, A and B. </p>
  
  <p>A contains a span with an icon. B contains a panel which height is variable, even after it loads, the user can add things to it and its height can still grow or become smaller.</p>
  
  <p>I need to vertically center my span, taking the panel's height as reference.</p>
  
  <p>here's my code:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-lg-3"&gt;&lt;span class="icon-clipboard icon-agenda-item"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;div class="col-lg-9"&gt;
          &lt;div class="panel panel-default deletable-panel"&gt;
              &lt;div class="panel-heading"&gt;
                 heading content
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                 body content
              &lt;/div&gt; 
          &lt;/div&gt; 
      &lt;/div&gt; 
  &lt;/div&gt; 
  </code></pre>
  
  <p>The first part is how it is displayed now, and the second part is how I want it to be displayed. As you can see, the "content" is editable inline, so if the panel grows, the span needs to adjust as well.</p>
  
  <p><img src="https://i.stack.imgur.com/PQKMq.jpg" alt="enter image description here"></p>
  
  <p>thank you very much!</p>
  
  <p><strong>EDIT 1</strong>
  I must add that I am using IE.
  I tried the first suggestion and this is the result:</p>
  
  <p><img src="https://i.stack.imgur.com/WAPMQ.jpg" alt="enter image description here"></p>