Extend the width of a label to fill the remainder of parent div

Question

I'm having a lot of problems trying to force a label tag to fill 100% of its parent's width, so that it can adjust depending on the user's window size.

For some reason, if I set the width to 100%, it just sets a seemingly-arbitrary width regardless (http://d.pr/i/uLDV).

I'm trying to change the width of these labels:

Here is the code that I'm working with.

HTML:

    <div class="page-content">
    <div class="lesson-title">Extend the properties of exponents to rational exponents - Lesson 1</div>
    <div class="lesson-description"><span>Learning outcome for this lesson:</span> Explain how the definition of the meaning of rational exponents follows from extending the properties of integer exponents to those values, allowing for a notation for radicals in terms of rational exponents.</div>
    <div class="tabs">
        <div class="tab">
            <input type="radio" id="tab-1" name="tab-group-1" checked>
            <label for="tab-1">What are rational exponents?</label>
            <div class="content">ONE</div>
        </div>
        <div class="tab">
            <input type="radio" id="tab-2" name="tab-group-1">
            <label for="tab-2">Solving for a fractional exponent</label>
            <div class="content">
                <iframe width="675" height="380" src="https://www.youtube.com/embed/6OFwfxmhtE8?modestbranding=1&iv_load_policy=3&rel=0&showinfo=0&theme=light&color=white&disablekb=1" frameborder="0"></iframe>
            </div>
        </div>
        <div class="tab">
            <input type="radio" id="tab-3" name="tab-group-1">
            <label for="tab-3">Example 1</label>
            <div class="content">stuff</div>
        </div>
        <div class="tab">
            <input type="radio" id="tab-4" name="tab-group-1">
            <label for="tab-4">Example 2</label>
            <div class="content">stuff</div>
        </div>
    </div>
</div>

CSS:

.page-content {
    width: 95%;
    min-width: 875px;
    margin: 25px auto;
}
.lesson-title {
    padding: 15px;
    font-size: 20px;
    font-weight: 100;
    color: #fff;
    background: #2070A2;
}
.lesson-description {
    padding: 15px;
    font-size: 16px;
    font-weight: 100;
    line-height: 22px;
    color: #333;
    background: #FCFCFC;
}
.lesson-description span {
    font-weight: 200;
}
.tabs {
    position: relative;
    min-height: 380px;
    clear: both;
    margin: 25px 0;
}
.tab {
    float: left;
}
.tab label {
    display: block;
    margin-left: 675px;
    font-size: 15px;
    font-weight: 100;
    background: #FCFCFC;
    padding: 20px;
    color: #333;
    border-bottom: 1px solid #fff;
}
.tab[type=radio] {
    display: none;
}
.content {
    position: absolute;
    top: 0;
    left: 0;
    background: black;
    right: 0;
    bottom: 0;
    float: left;
    width: 675px;
    height: 380px;
    margin-bottom: 30px
}
[type=radio]:checked ~ label {
    background: #1897DC;
    color: #FFF;
    z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
    z-index: 1;
}

Jsfiddle: http://jsfiddle.net/M8XYr/

Does anyone have any ideas on how to accomplish this?

Answer 1

Just change the .tab class:

.tab {
   float: left;
   width: 100%;
 }