html "table-layout: fixed;" and flexible width in the same table

Question

I would like to use "table-layout: fixed;", but also need the flexiblility of flexible tables. I made a js-fillde that explanes the problem.

1st Table:

• Normal Layout.
• Longest left column's width sets the width for the left column.

2nd Table:

• Fixed layout.
• Forces horizontal scrollbar for long contents.

3rd Table:

• Both together?

Any Idea, how to do that without Javascript?

table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0.5em;
}
td {
    border: 1px solid #ff0000;
}

table.tableFixed {
    table-layout: fixed;
}
table.tableBoth {
    // ???
}

td.tdLabelLeft {
    width: 100%;
    text-align: left;
}
td.tdLabelRight {
    width: 1%;
    text-align: right;
}
td.tdData {
    width: 100%;
}

div {
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
}
label {
    display: block;
    width: 100%;
    white-space: nowrap;
}

<table class="tableNotFixed">
    <tbody>
        <tr>
            <td class="tdLabelRight">
                <label>width: 1%;</label>
            </td>
            <td class="tdData">
                Automatically adjust to the width of the left column.
            </td>
        </tr>
        <tr>
            <td class="tdLabelRight">
                <label>Short</label>
            </td>
            <td class="tdData">
                This is a normal table.
            </td>
        </tr>
    </tbody>
</table>

<table class="tableFixed">
    <tbody>
        <tr>
            <td class="tdLabelLeft" colspan="2">
                <label>table-layout: fixed;</div>
            </td>
        </tr>
        <tr>
            <td class="tdScroll" colspan="2">
                <div>This text is very long and needs a horizontal scrollbar. This text is very long and needs a horizontal scrollbar.</div>
            </td>
        </tr>
    </tbody>
</table>

<table class="tableBoth">
    <tbody>
        <tr>
            <td class="tdLabelRight">
                <label>width: 1%;</label>
            </td>
            <td class="tdData">
                Automatically adjust to the width of the left column.
            </td>
        </tr>
        <tr>
            <td class="tdLabelLeft" colspan="2">
                <label>table-layout: fixed;</div>
            </td>
        </tr>
        <tr>
            <td class="tdScroll" colspan="2">
                <div>This text is very long and needs a horizontal scrollbar. This text is very long and needs a horizontal scrollbar.</div>
            </td>
        </tr>
        <tr>
            <td class="tdLabelRight">
                <label>Short</label>
            </td>
            <td class="tdData">
                Can I mix the two styles?
            </td>
        </tr>
    </tbody>
</table>