Largeur auto d'une cellule

Salut à tous ,

je voudrais réaliser un titre comme ceci
http://i.gyazo.com/342cb477cd34d5db3e71ca3336284ffb.png ,

mais en gros je voudrais que le petit remplissage à droite remplisse automatiquement en fonction de la taille de mon texte , donc pour ça j'ai penser à faire un tableau en deux cellules

la cellule de gauche est le titre et la cellule de droite prend sa taille automatiquement avec un repeat-X en background ,

seulement je n'arrive pas à faire que la cellule de gauche est une taille automatique en fonction du texte

Html :

<div class="title">
            <h1>Mes Derniers Articles</h1>
            <span class="title-fill"></span>
          </div>

Css :

.title {
    width:100%;
    border-left:5px solid $red;
    padding-left:10px;
    display:table;
    h1{
        display:table-cell;
        font-size:rem-calc(32);
        color:$blue;
        font-weight: 700;
        text-align: left;
        line-height:50px;
        margin:0;
        padding:0;
        text-transform: uppercase;
        width: auto;
    }
    .title-fill {
        display:table-cell;
        display:inline-block;
        height:15px;
        width:100%;
        background:url(../img/fill.png) repeat-x ;
    }
}

Merci d'avance