Vertical aligning an icon with a button

Hi guys I am relatively new to HTML and CSS and I have the following difficulty: see below HTML ::

<a href="#" class="arrow-btn">
       about us <i class="fa fa-arrow-right"></i>
</a> 

      

        
        
        
      

    

and I have the following CSS ::

body {
    background: #000;
}
.arrow-btn {
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    font-size: 2em;
    text-transform: uppercase;
    display: block;
    margin: 50px auto 50px auto;
    font-weight: 700;
}

.arrow-btn:focus , .arrow-btn:active , .arrow-btn:hover {
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    font-size: 2em;
    text-transform: uppercase;
    display: block;
    margin: 50px auto 50px auto;
}

.arrow-btn > i {
    font-size: .8em;
}

.arrow-btn:hover > i ,  .arrow-btn:active > i ,  .arrow-btn:focus > i{
    -webkit-transition: transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
    -webkit-transform: translate3d(10px, 0, 0);
    -ms-transform: translate3d(10px, 0, 0);
    -o-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
}

      

        
        
        
      

    

my difficulty has to do with vertical alignment, now since my HTML markup is so tiny I would prefer not to use the solution display:table

as it would require additional markup, I would ideally like my markup to be the same as it is, now please , please note that I added the following css in .arrow-btn i

:

.arrow-btn > i {
    font-size: .8em;
}

      

        
        
        
      

    

so how can the text in an arrow button be vertically aligned?

violin here .

Thank.

Alex-g.