CSS - Positionner dynamiquement un élément

Hello

Après pas mal d'années à suivre Grafikart (Vidéos, tutos...) je me suis enfin décidé à m'inscrire sur le site :D

Alors voici mon problème, je bosse sur un genre de pseudo-bootstrap personnel et je bloque sur les blocs de code, ou du moins sur comment implémenter le design de ces dernières sans passer par du javascript (Que je ne maîtrise pas beaucoup).

Concrètement, mes blocs de codes ressemblent à ça:

Rien de spécial, le type de code (En haut à droite) est un simple span stylisé avec une classe spéciale (Position absolue par rapport au bloc qui lui est en position relative), mais le hic c'est que quand une ligne de code dépasse la largeur du site, une scrollbar est générée (overflow:auto) mais une fois qu'on 'scrolle' vers la droite le span ne suit malheureusement pas, voyez par vous-même:

Les règles css concernées (Utilisation de sass):

.code {
    padding: 20px 10px 10px 10px;
    overflow: auto;
    z-index: 1;
    border-left: solid 20px $primary_color;
    position: relative;
    @include border-radius(5px);
    @include box-shadow(darken($title_color, 5) 0 -5px 5px inset );

     .code-label {
        padding: 0 5px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        color: $background_color;
        background-color: $primary_color;
        @include border-radius(0 5px 0 5px);
    }

    * {
        margin: 0;
    }
}

Une idée de comment y remédier? :/