Setting the variable percentage width of HTML elements next to other variable-width elements

I have a HTML structure with given CSS.
Both caption and progress elements should be rendered in same line. caption elements should not have fixed width and progress elements should fill up the rest of the space next to caption based on their inline-set width, which means that every progress element will have a different total pixel-width but should fill up only the given percentage of available space.
HTML structure and CSS rules can be changed in any way.

Is it possible to solve this problem with CSS only?

.table {
    padding: 15px;
    width: 280px;
    border: 1px solid black;
    font-family: sans-serif;
    font-size: 12px;
}

.caption {
    float: left;
}

.progress {
    height: 14px;
    border: 1px solid white;
    border-radius: 4px;
    background-color: green;
    overflow: hidden;
}

.value {
    margin-left: 5px;
}

<div class="table">
    <div class="row">
        <div class="caption">Short text: </div>
        <div class="progress" style="width:11.65%">
            <span class="value">11.65</span>
        </div>
    </div>
    
    <div class="row">
        <div class="caption">A bit longer text: </div>
        <div class="progress" style="width:100%">
            <span class="value">100.00</span>
        </div>
    </div>
    
    <div class="row">
        <div class="caption">X: </div>
        <div class="progress" style="width:45.50%">
            <span class="value">45.50</span>
        </div>
    </div>
</div>

Solution

Have you considered using Flexbox?

Just add this rule:

.row {
    display: flex;
}

If your are concerned about browser support, an alternative would be using display:table. You should change your markup and CSS, like this:

.table {
        border: 1px solid black;
        font-family: sans-serif;
        font-size: 12px;
        padding: 15px;
        width: 280px;
    }
    .inner-table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .caption {
        display: table-cell;
        white-space: nowrap;
        width: 1%;
    }
    .progress {
        background-color: green;
        border: 1px solid white;
        border-radius: 4px;
        display: table-cell;
        height: 14px;
    }
    .value {
        margin-left: 5px;
        display:block;
        width:0;
        overflow: visible;
    }

<div class="table">
        <div class="inner-table">
            <div class="row">
                <div class="caption">Short text: </div>
                <div style="width:1.65%" class="progress">
                    <span class="value">1.65</span>
                </div>
                <div class="remainder"></div>
            </div>
        </div>
        
        <div class="inner-table">
            <div class="row">
                <div class="caption">A bit longer text: </div>
                <div style="width:100%" class="progress">
                    <span class="value">100.00</span>
                </div>
                  <div class="remainder"></div>
            </div>
        </div>
        
        <div class="inner-table">
            <div class="row">
                <div class="caption">X: </div>
                <div class="progress" style="width:45.50%">
                    <span class="value">45.50</span>
                </div>
                <div class="remainder"></div>
            </div>
        </div>
    </div>