title: Triangle drawn using css borders appears on the top of the text
body: <p>Triangle next to my text is vertically aligned towards the top instead of being in same level as the text.</p>
  
  <p>It looks like,  </p>
  
  <p><a href="https://i.stack.imgur.com/feCea.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/feCea.png" alt="enter image description here"></a></p>
  
  <p>Plunker code is <a href="https://plnkr.co/edit/KeestwsxGNpzF2V2sjEE?p=preview" rel="nofollow noreferrer">here</a>.</p>
  
  <p>My css for triangle is,</p>
  
  <pre><code>.arrow-down {
     width: 0; 
     height: 0; 
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-top: 10px solid #000;   
   }
  </code></pre>
  
  <p>Note: Alternatively, i tried to display a triangle using the unicode <code>\25BC</code> but it didn't appear.</p>
  
  <pre><code>&lt;span class="triangle"&gt;&lt;/span&gt;
  
   .triangle{
     display: inline-block;
     width: 20px;
     height: 20px;
     content : '\25BC';
   }
  </code></pre>