Question

I would like to make display-field divs to take up the whole remaining width. Now the display-field width is equal to text length. How to do that?

.display-label {
        float:left;
        clear:left;
        min-width:160px;
}

.display-field {
        float:left;
        clear:right;
}

<div class="display-label">Account Id</div>
<div class="display-field">30221</div>
<div class="display-label">Full Name</div>
<div class="display-field">Tomas</div>

Answer 1

Remove float and clear from .display-field. Now the .display-field div starts from the left side of the browser so you need to add the desired colors to the divs to manipulate the output.

.display-label {
        float:left;
        clear:left;
        min-width:160px; 
        background:white
}

.display-field {
    background:red
}​

DEMO