I have a form input, and the label spans multiple lines, and I want the corresponding checkbox to appear at the bottom (last line of the label element).

Here is what I was playing with

CSS

.standard-form {
    width: 500px;
    border: 1px solid red;
  }


.standard-form .input-row {
  overflow: hidden;
  margin-bottom: 0.8em;
}

.standard-form label {
  width: 25%;
  float: left;
}

.standard-form .input-container {
  width: 70%;
  float: right;
}

  .standard-form .checkbox .input-container {
  display: table-cell;
  height: 100%;
  vertical-align: text-bottom;

}

HTML

<form class="standard-form">
<div class="input-row checkbox" id="permission">
                        <label for="input-permission">
               Do I hereby grant you permission to do whatever tasks are neccessary to achieve an ideal outcome?            </label>
            <div class="input-container">
                <input type="checkbox" id="input-permission" name="permission" value="true" />            </div>

        </div>
  </form>

It is also online at JSbin.

Is there any way to do this? I notice that div.input-container isn't expanding, which is the old multi column problem with CSS.

I thought I could get this going with display: table-cell and vertical-align: bottom but I haven't been able to do it yet. I don't mind that IE6/7 won't render it correctly.