Text inside of link aligns incorrectly in WordPress but is fine in HTML

Question

As you can see in the images, the text "English" isn't vertically centered in the WordPress version of the site I'm building but with the same code as I used in the HTML version it works perfectly. Any ideas why?

HTML

<div class="right-bar">
    <a class="language">
        <img src="img/flags/EN-us.png" alt="English / US">
        <span>English</span>
    </a>
    <a class="search-btn">
        <i class="fa fa-search"></i>
    </a>
</div>

SASS

.right-bar {
        background: #1f1f1f;
        float: right;
        height: 100%;
        padding: 32px 20px 0;
        position: relative;

        &::after {
            position: absolute;
            top: 0;
            right: 100%;
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 98px 83px;
            border-color: transparent transparent #1f1f1f;
        }

        .language {
            border: 1px solid #363636;
            border-radius: 40px;
            color: #898989;
            display: block;
            float: left;
            height: 34px;
            font-size: 10px;
            font-weight: 700;
            line-height: 30px;
            padding: 0 20px;
            position: relative;
            text-transform: uppercase;
            z-index: 99;
        }

        .search-btn {
            float: left;
            display: block;
            margin: 0 0 0 30px;
            color: #fff;
            font-size: 26px;
            font-weight: 400;
            transition: color .2s;

            &:active {
                color:#8eb82f;
            }
        }
    }

Answer 1

SCSS

.language{
  img{
  vertical-align:middle;
  }
}

This may help you.