Dynamic Width - CSS

Question

Does anyone know if the following is achievable with CSS?

I want the div.title and div.spacer to take up 100% of the width of div.row.

My goal is to have a tabbed panel. I'm pretty close, I just cant think of a way set the width of.spacer to fill the remaining space in div.row

Here is a screenshot of what I'm doing:

Here is fiddle: http://jsfiddle.net/yux2jr1n/

.row {
  width: 100%;
  display: block;
  display: content-box;
  margin: 0 auto 15px auto;
  border-left: solid 2px rgba(0, 0, 0, 0.3);
  border-right: solid 2px rgba(0, 0, 0, 0.3);
  border-bottom: solid 2px rgba(0, 0, 0, 0.3);
  border-radius: 0px 8px 8px 8px;
  -moz-border-radius: 0px 8px 8px 8px;
  -webkit-border-radius: 0px 8px 8px 8px;
  padding-top: 2em;
  padding-bottom: 2em;
  text-align: left;
  max-width: 1200px;
}
.tab {
  margin-top: -60px;
  display: content-box;
  float: left;
  width: 100%
}
.spacer {
  border-bottom: solid 2px rgba(0, 0, 0, 0.3);
  float: right;
}
.title {
  border-left: solid 2px rgba(0, 0, 0, 0.3);
  border-right: solid 2px rgba(0, 0, 0, 0.3);
  border-top: solid 2px rgba(0, 0, 0, 0.3);
  border-radius: 8px 8px 0px 0px;
  -moz-border-radius: 8px 8px 0px 0px;
  -webkit-border-radius: 8px 8px 0px 0px;
  float: left;
  width: auto;
}
.clearfix {
  display: block;
  clear: both;
  width: 100%;
}

<section id="Work" class="row">
  <div class="tab">
    <div class="title">
      <h1><Span class="highlight">My Work</Span></h1>
    </div>
    <div class="spacer"></div>
  </div>
  <div class="clearfix"></div>
  <article>Some Content</article>
</section>

Answer 1

UPDATE: See bottom of this answer...

I assume you want a line below the "tab" like this:

I did it by doing this:

    .tab {margin-left:-2px;border-bottom: solid 2px rgba(0,0,0,0.3);margin-right:-2px;}
.title {margin-bottom:-2px;background-color:#fff;padding-left:10px;padding-right:10px;}

And by deleting :

<div class="spacer"></div>

What you do is to add a line in full width using the "tab", then you add a massive color (white) to the background of "tab", and then you make the "tab" move down 2 px (margin:-2px) to cover over the whole line.

You can use the same solution when you have more tabs, and you only want the active tab have no line below.

Here is fiddler with the solution: http://jsfiddle.net/yux2jr1n/2/

-- Update:

See this fiddle: http://jsfiddle.net/yux2jr1n/5/

I made a "sidecover" to make the lines align correct on the right side.