CSS : Grade badge to the right of the user name and online circle

Wlork

Hello,

I'm currently working on the design of my flarum. I'm making some important changes 🙂

I want to make ALL avatar of a user light up when online, and put the badges to the right of the username, instead of on the avatar itself.

Source : https://flarum.it/d/42-badge-grado-a-destra-del-nome-utente-e-online-circle

I put this CSS but it doesn't work on PC or mobile :

@media (max-width: 768px) {
.PostUser-badges {
    position: relative;
    top: 0px;
    left: 0px;
    width: 32px;
}
}

.PostUser-badges.badges {
  float: none;
  width: auto;
  margin-left: 4px;
  top: -2px;
}
.PostUser-badges.badges li span {
  margin-left: 4px;
}
.PostUser .UserOnline {
  position: absolute;
  left: -87px;
  top: -3px;
  z-index: -1;
}
.PostUser .UserOnline .icon {
  font-size: 64px;
  border: 2px solid #fff;
  border-radius: 50%;
  line-height: 64px;
  box-shadow: 0 0px 3px 3px;
}

And :

.PostUser .UserOnline .fa-circle { color: green; }

Thank you in advance for your help 🙂