title: How do I get the caret to line up with text
body: <p>I have text and then a carat which drops down the text but for some reason can not get the caret to vertically align with the text despite my efforts.</p>
  
  <p>Jsfiddle: <a href="http://jsfiddle.net/nCP9J/5/" rel="nofollow">http://jsfiddle.net/nCP9J/5/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id ="hiddensubmit" class = "dropdown-toggle" data-toggle="dropdown" onclick="document.formSearch.submit()" style="top:55px; font-size:20px;"&gt;
  &lt;a href="#" id="drop" class ="dropdownsearch"&gt;Stuff&amp;nbsp;&lt;span class = "searchcaret" style="display:inline;line-height:66px;vertical-align:middle;"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.dropdown-toggle {
    *margin-bottom: -3px;
  }
  .searchcaret {
    display: inline-block;
    width: 0;
    height: 0;
    line-height:100px;
    padding: 10px 0px 0px 0px;
    vertical-align: middle;
    border-top: 4px solid #000000;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
    opacity: 0.3;
    color: #5A5A5A;
    filter: alpha(opacity=30);
  </code></pre>
  
  <p>position:absolute; top:10px;
      }</p>