Выровнять дочерний элемент снизу с помощью CSS

Question

У меня есть форма input, а label занимает несколько строк, и я хочу, чтобы соответствующий флажок появился внизу (последняя строка элемента label).

Вот с чем я играл

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>

Он также онлайн на JSbin .

Есть ли способ сделать это? Я заметил, что div.input-container не расширяется, что является старой многостолбцовой проблемой в CSS.

Я думал, что смогу добиться этого с display: table-cell и vertical-align: bottom, но я пока не смог этого сделать. Я не против того, чтобы IE6 / 7 не отображал его правильно.

Я также пытался использовать комбинацию position: relative; с дочерним элементом position: absolute; bottom: 0;, за исключением того, что мне нужно указать высоту, которая, я не могу гарантировать, будет высотой надписи слева.

Answer 1

Смотрите мои изменения в действии: http://jsbin.com/ocovu/2/edit

Вот соответствующие объявления:

.standard-form .input-row {
  overflow: hidden;
  margin-bottom: 0.8em;
  position: relative;
}
.standard-form .checkbox .input-container {
  position: absolute;
  bottom:-2px;
  left:25%;
}

Answer 2

Пробовал display: block?