make div fill up remaining space

Answer 1

This is a technique using display: table; https://jsfiddle.net/sxk509x2/

Browser support (ie 11+): http://caniuse.com/#feat=css-table

HTML

    
$
    
    
.00

CSS

.outer{
    width:300px;
    height:34px;
    display:table;
    position: relative;
    box-sizing: border-box;
}
.static{
    display:table-cell;
    vertical-align:middle;
    box-sizing: border-box;
}
.dynamic{
    display:table-cell;
    vertical-align:middle;
    box-sizing: border-box;
    width: 100%;
    height:100%;
}
.pretty{
    border: 1px solid #ccc;
    padding-left: 7px;
    padding-right: 7px;
    font-size:16px;
}
.pretty-extended{
    background: #eee;
    text-align:center;
}

The classes that contain "pretty" are not required to accomplish what you are trying to do. I just added them for appearances.