How to let a div take up the remaining width?

Question

I'm making an output field with labels in front of them. Each label has a different width due to the label name and I want to let the output field take up the remaining width between the label and the next label. Now the output field is only growing in width if there is text in the field.

HTML:

<div class="row">
    <div class="div triple"><label for="bedrijf">Bedrijfsnaam</label>
        <span class="output" id="bedrijf"></span></div>
    <div class="div triple"><label for="functie">Functie</label>
        <span class="output" id="functie"></span></div>
    <div class="div triple"><label for="kvk">KVK-nummer</label>
        <span class="output" id="kvk"></span></div>
</div>

CSS:

.row {
    float: left;
    width: 100%;
}
.triple {
    width: 33%;
}
.output {
    width: auto;
    text-align: left;
    color: #f57f43;
    display: inline-block;
}

question is unclear..please describe more..ty – Leo the lion Jun 26 '15 at 08:34 — Leo the lion, Jun 26 '15 at 08:34

score 0 · Answer 1 · edited May 23 '17 at 11:58

The question has been asked many times here. Google can really help you know ;).
The interesting link is here: Expand a div to take the remaining width
The solution is there

.row {
    width: 100%;   
}
.triple {
    width: 33%;
    float: left;
}

.output {
    height: 20px;
    vertical-align: middle;
    overflow: hidden;
    text-align: left;
    color: #f57f43;
    display: block;
    width: auto;
    background-color: black;
}
label{display: inline-block; float: left;}

http://jsfiddle.net/piiantom/d5w1ntaf/

How to let a div take up the remaining width?

1 Answers1