Fully expand this CSS inline-block div scan-line

Question

I want this scan line effect to work properly. To reveal the text from left to right. As if the cathode-ray is burning it into the phosphors on the screen.

The idea is to slide across black rows, that have a transparent tip. Here is a 80% working demo. The rightmost black .mask div in every row will not expand. It must.

I have tried to keep the right-most .mask div with a black background as inline-block and make it full width. I somewhat understand why the request does not work (width:100% pushes the other inline-blocks onto the next line, as is only proper), but there must be a way to get this full right hand side without hacking the widths in javascript.

.row {
        font-family:'Courier New',Courier,monospace;
        font-size:16px;
        display:block;
        height:auto;
        width:100%;
        min-width:20%;
        position:relative;
        margin-right:0px;
}

.mask {
        display:inline-block;
        width:auto; /* 100% does not work */
        background:black;
        white-space:pre;
}

Answer 1

this won't work on jsbin becuase it uses absolute positioning (unless you view the full screen demo).. but I provided it anyways for you to copy/paste it into your own browser http://jsbin.com/uteyik/12/.. below are the change highlights:

css:

.row {
 ..
  position:absolute;   /* changed to absolute */

}
.mask {
  ..
  width:100%;  /* changed to 100% */
  position:absolute;   /*changed to absolute */
}

and javascript:

jQuery(document).ready(function() {
    function fill_box(rows) {
        var rowHeight = getSampleRowHeight();
        var thisRowHeight = 0;
        for(var i = 0; i < rows; i += 1) {
            $('.box').append('<div class="row" style="top: '+thisRowHeight+'"><div class="scan_cursor i1"> </div><div class="scan_cursor i2"> </div><div class="scan_cursor i3"> </div><div class="mask"> </div></div>');       
            thisRowHeight +=rowHeight;
        }   
    }

    fill_box(30);

    function tag_animate(el) {
        // animate the mask
        el.animate( {
            'margin-left' : '100%'
            }, 
            {
                complete : function () {        
                    tag_animate(el.parent().next().find('.mask'));
                }
            } 
        );
        // animate the stripes
        el.siblings().animate( {
            'margin-left': '100%'
            }, 
            {
               complete : function () {     
                   el.siblings().hide();
               }
            }
        );      
    }    

    tag_animate($('.box').find('.row').eq(0).find('.mask'));

    function getSampleRowHeight() {
        // get sample row height, append to dom to calculate
        $('.box').append('<div class="row" style="display: hidden"> <div class="scan_cursor i1"> </div></div>');
        var rowHeight = $('.row').height();
        $('.box').find('.row').remove();
        return rowHeight;
    }    
 });

explanation: I first create a dummy row and calculate it's height. I then create rows that have position: absolute and position it from the top using the dummy row height x row number. the idea is that I wanted to make everything with absolute positioning so that the mask doesn't push the stripes below when it's 100%, also the row has to be absolute because as I make it's contents disappear, I don't want the rows below to jump up.

bonus: see it work the opposite way (ie the text disappearing): http://jsbin.com/uteyik/9 this was my initial (and incorrect) answer