XF 2.1 Double Stacking Group Banners with CSS

[Brandon K]

<!-- Start User Ranks -->
<xen:if is="{$user.is_admin}">
<span class="userrank">Administrator</span>
</xen:if>

<xen:if is="{$user.is_moderator} AND !{$user.is_admin}">
<span class="userrank">Moderator</span>
</xen:if>

<xen:if is="{$user.user_group_id} == 5">
<span class="userrank">Your_custom_usergroup_name</span>
</xen:if>
<!-- End User Ranks -->

How would one go about making this work in XF2.1+?

I'm looking to double stack the top two groups a user is in, but you can't do that in the options. I found this code for XF1. Any help?