Having a <div> with display:table; and around 10 children (number may vary, could be buttons or inputs) with display:table-cell;. The width for all children is set except for one. The goal is to have the last child without fixed width fill the remaining space.
As an example, if the parent <div> has a width of 600px and there are 4 buttons each with a width of 40px, we want the fifth element to automatically take up 440px without static measurements.
This is the current setup:
HTML:
<div class="table">
<button class="show"></button>
<div class="id">TEXT</div>
<div class="username">TEXT</div>
<div class="dob">TEXT</div>
<button class="edit"></button>
<button class="delete"></button>
</div>
CSS:
.table {
display:table;
width:100%;
height:40px;
}
div.table > * {
display:table-cell;
height:40px;
line-height:40px;
}
div.table > button {width:64px;}
div.table > div.id {width:48px;}
div.table > div.dob {width:128px;}
//EDIT: The element needing to fill the space is div.username