.completion-bar {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas:
        "label data";
    margin-bottom: 0.75em;
}

.completion-bar-label {
    grid-area: label;
}

.completion-bar-data-container {
    grid-area: data;
    position: relative;
    height:30px;
}

.completion-bar-data-bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
}

.completion-bar-data-complete {
    position: absolute;
    left: 4px;
    top: 4px;
    bottom: 4px;
    border-radius: 30px;
}