Выравнивание нескольких элементов в нижней части родительского

Question

Я пытаюсь выровнять несколько полей ввода в нижней части родительского div.Например:

    .inner-container {
        margin-right: 10px;
        float: left;
    }

    <div class="outer-container">
        <div class="inner-container">
            <label>Test</label><br />
            <input type="text" placeholder="something here" />
        </div>
        <div class="inner-container">
            <label>Test</label><br />
            <input type="text" placeholder="something here" />
        </div>
        <div class="inner-container">
            <input type="text" placeholder="something here" />
        </div>
    </div>

Обратите внимание, что последнее поле ввода не выровнено с другими полями ввода.Я пытаюсь заставить это окно вертикально выравниваться с остальными.

Я также пытаюсь заставить это работать также на IE11 (устарел, я знаю), также работая на современных браузерах.

Спасибо.

Answer 1

Тривиальное решение - добавить br, если вам не нужен сложный CSS, и убедиться, что он работает для dead IE:

.inner-container {
        margin-right: 10px;
        float: left;
    }

<div class="outer-container">
        <div class="inner-container">
            <label>Test</label><br >
            <input type="text" placeholder="something here" >
        </div>
        <div class="inner-container">
            <label>Test</label><br >
            <input type="text" placeholder="something here" >
        </div>
        <div class="inner-container">
             <br>
            <input type="text" placeholder="something here" >
        </div>
    </div>

Или замените число с плавающей точкой на inline-block и оставьте значение по умолчанию vertical-align:

.inner-container {
        margin-right: 10px;
        display:inline-block;
    }

<div class="outer-container">
        <div class="inner-container">
            <label>Test</label><br >
            <input type="text" placeholder="something here" >
        </div>
        <div class="inner-container">
            <label>Test</label><br >
            <input type="text" placeholder="something here" >
        </div>
        <div class="inner-container">
            <input type="text" placeholder="something here" >
        </div>
    </div>