Progress Bar text colors

HTML

<div class="progress-bar" id="p-b">
    <div class="progress-fill" id="p-f">
        <div class="progress-fill-text" id="p-f-t">Here is text</div>
    </div>
    Here is text
</div>

CSS

.progress-bar {
    background:#ccc;
    padding:10px 0;
    width:100%;
    text-align:center;
    position:relative;
}

.progress-fill {
    background:blue;
    color:#fff;
    width:60%;
    padding:10px 0;
    position:absolute;
    left:0;
    top:0;
    overflow:hidden;
}

.progress-fill-text {
}

JavaScript

/*
function barWidth() {
    var barWidth = $('.progress-bar').width();

    $('.progress-fill-text').css('width',barWidth);
}
barWidth();

window.onresize = function() {
    barWidth();
}

*/


function barWidth() {
    var el =  document.getElementById("p-b").offsetWidth;
    var prog =  document.getElementById("p-f-t");
    prog.style.width = el + "px";
}

barWidth();

window.addEventListener('resize', function(event){
     barWidth();
});