Make divs auto-fill space

Question

So I've been trying to figure out an issue with my divs here; how to translate my design into the actual layout, and I've not had much luck with research or implementation. In the attached link, where you see //PORTFOLIO and then a line extending to the edge of the content area, there's a red line. Right now I have both the //PORTFOLIO and red line divs set to a specific pixel width, but I want to be able to have both divs auto-set their width (the first to automatically set its width based on how much the //TITLE takes up, and the second to fill the remaining space in the container) since I'll have other sections of the website doing the same thing, and don't want to measure specifically for each area. Any suggestions are most welcome, thank you so much!

Example

Solution 1

See: http://jsfiddle.net/GmtMK/1/ (change the width of the browser window)

<div id="columnA">
    <div id="title">//Portfolio</div>
    <div id="line"></div>
</div>

#columnA {
    font-family: 'ProximaNovaRegular', Geneva, sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    color: #C10000;
    margin-bottom: 20px;
    letter-spacing: 4pt;
}
#title {
    float: left
}
#line {
    overflow: hidden;
    height: 9px;
    border-bottom: 1px solid #c10000;
}

Solution 2

First, let me complement you on your website, it looks nice and stylish! Secondly, I have a solution for you, using display: table css property, however, it requires adding an <hr /> element is it won't let you have cells of uneven height:

<div id="columnA">
    <div id="title">//Portfolio</div>
    <div id="line"><hr /></div>
</div>

#columnA {
  width: 400px;
  display:table;
}
#title {
  display:table-cell;
  width: 175px;
}
#line {
  display:table-cell;
  width: auto;
}
hr { 
  background-color: #C10000;
  height: 1px;
  border: 0;
}

Please see full example: http://jsfiddle.net/GmtMK/