[css] How to make an inline-block element fill the remainder of the line?

A modern solution using flexbox:

_x000D_
_x000D_
.container {_x000D_
    display: flex;_x000D_
}_x000D_
.container > div {_x000D_
    border: 1px solid black;_x000D_
    height: 10px;_x000D_
}_x000D_
_x000D_
.left {_x000D_
   width: 100px;_x000D_
}_x000D_
_x000D_
.right {_x000D_
    width: 100%;_x000D_
    background-color:#ddd;_x000D_
}
_x000D_
<div class="container">_x000D_
  <div class="left"></div>_x000D_
  <div class="right"></div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

http://jsfiddle.net/m5Xz2/100/