Метки под входами встраиваются вместе с другим текстом

Question

Мне нужна помощь по выравниванию надписей под полями ввода, например описание того, что следует вводить в текстовое поле, но мне также нужен текст, выровненный по текстовому полю после

Я попытался создать новые строки таблицы под полями вводаи с использованием полей, но в Chrome это не совпадает, а в IE, но не в Chrome.

Я пробовал

Вы прибудете на: (Date) в (Time) , пожалуйста, возьмите с собой все документы.

Это должно быть:
Вы прибудете: в (в текстовых полях), пожалуйста, принесите вседокументы с вами (выровняйте с предыдущими текстовыми полями, так что это также должно быть над метками).

Перефразирование: мне нужно что-то вроде парагафа, с блоком текста, но с входными данными, смешанными с этим текстом,Тогда мне нужны маленькие описательные метки прямо под входами.Я не хочу, чтобы эти маленькие описательные метки были встроены в текст другого абзаца только под входными данными ... пример:

"Это абзац <входной текст здесь> <метка, которая идет под входными данными>текст абзаца продолжается здесь <другой входной текст здесь> <метка, которая идет под этим вводом> снова текст абзаца продолжается здесь в соответствии с текстом другого абзаца и вводами "

Answer 1

Мне кажется, я понял, что вы пытаетесь спросить.Вам нужно обернуть метку и ввести в div, чтобы метка могла располагаться вне метки ввода.

.label-under {
  position: relative;
  display: inline;
}

.label-under label {
  position: absolute;
  left: 0px;
  top: 10px;
}

span {
  line-height: 2.5;
}

<span style='display: inline-block;' >You will arrive on: <div class="label-under"><input type='text' >
<label>(Date)</label></div> at <div class="label-under"><input type='text' >
<label>(Time)</label></div>, please bring all documents with you.</span>

Редактировать: вам может потребоваться настроить высоту строки элемента span, если вы просматриваете на устройстве с небольшой шириной.

// Is optional and can be removed.
span {
  line-height: 2.5;
}
// But top: 10px must be changed to top: 20px

Answer 2

пропустите таблицу и используйте вместо нее дисплей flex.

.form {
  display: flex;
  align-items: center;
}

.input-container {
  display: flex;
  align-items: flex-end;
  margin-right: 2rem;
}

.input-container__label {
  margin-right: .5rem;
}

<form action="" class="form">

  <div class="input-container">
    <label for="email" class="input-container__label">Email</label>
    <input type="text" class="input-container__element">
  </div>

  <div class="input-container">
    <label for="something" class="input-container__label">Something</label>
    <input type="text" class="input-container__element">
  </div>

</form>