Display child divs in full width

Question

I have a container with several spans in it but the problem is that the inner containers cannot be displayed in full width (jsfiddle):

test <span class="total">45
    <span class="preview">
        <span class="upc">7 carrots</span>
        <span class="edc">14 nuts</span>
        <span class="poc">21 apples</span>
    </span>
</span>

CSS:

.total {
    position: relative;
}
.edc, .upc, .poc {
    position: absolute;
    background-color: #74BDDB;
}
.upc {
    top: -1.2em;
    left: 5px;
}
.edc {
    top: 1.7em;
    left: 5px;
}
.poc {
    top: 0.3em;
    left: 100%;
}

I tried solving it by defining the absolute width of the inner spans (click) but it has two drawbacks. First, I have the unwanted padding of spans with shorter content ("nuts") and second, when the number gets larger I have a line break again so using absolute width is not a solution. What can I do?

Answer 1

Add white-space: nowrap to .edc, .upc, .poc {}.

Working Fiddle