Как мне получить этот выбор, чтобы выровнять по вертикали снизу?

Question

У меня есть этот простой код:

<div>
  <select style="float:right; vertical-align:bottom;">
    <option>Status</option>
  </select>
  <h3 style"font-size: 72px;">header</h3>
</div>

http://jsfiddle.net/pqLmtskd/1

Кажется, это просто, но я упускаю что-то фундаментальное ...

Не могли бы вы показать мне, как заставить элемент select опуститься в конец тега h3?Кроме того, если вы можете помочь мне понять, почему это не сработает с моим кодом, это было бы полезно.

Я прочитал этот вопрос здесь: Как выровнять по вертикали нижнюю часть

Но использование такого большого количества кода только для того, чтобы заставить элемент двигаться вниз по сравнению с его соседом, кажется немного длинным.Кажется, что концепция вертикального выравнивания: дно должно быть само за себя.

Пожалуйста, смотрите изображение ниже.Я бы хотел, чтобы селектор справа выровнялся с самым низким краем зеленого текста.

Answer 1

<div>
  <h3 style"font-size: 72px;">header</h3>
  <select>
    <option>Status</option>
  </select>
</div>

Вам нужно поставить тег h3 перед выбором, чтобы получить его так, как вы хотите

Answer 2

Если я правильно понимаю картинку, вы бы хотели, чтобы меню выбора располагалось справа, чуть выше верхней части заголовка.Если это так, вы можете использовать flexbox, чтобы сложить заголовок и select, а затем переместить меню вправо.

.container {
  display: flex;
  flex-direction: column;
}

select {
  float:right; 
}

h3 {
  margin: 0;
}

<div class="container">
  <div>
    <select>
      <option>Status</option>
    </select>
  </div>
  <h3>header</h3>
</div>

Answer 3

Если я понял, вы хотите, чтобы ваше выпадающее меню находилось поверх тега H3, поэтому это будет выглядеть так:

    <div style='position:relative;'>
      <select style="bottom:0;right:0;">
        <option>Status</option>
      </select>
      <h3 style"font-size: 72px;">header</h3>
    </div>