Funkiness in line-height CSS

I’m not using a very complicated CSS, but when I use the line-height feature, while it generally works, the badges next to the nickname in the twitch chat are not aligned with the nickname.

So it will look something like this

                     [NICKNAME]: Message
[SUBBADGE]

Is there any way I can get these two to align?

Ignore the “diagram” it didn’t work properly

Here is the exact CSS I am using

body {
  background-color: rgba(0, 0, 0, 0);
  margin: 0px auto;
  overflow: hidden;
}

::-webkit-scrollbar {
  visibility: hidden;
}

#chat_box {

}

.chat_line {
  font-size: 20px;
  font-family: Bebas Neue;
  letter-spacing: 2px;
  line-height: 120%;
}

.chat_line .nick {
  font-weight: normal;
}

.chat_line .message {

}

Try playing around with the vertical-align: bottom; in the .tag class.