Как поместить всплывающую подсказку в поле с надписью

Question

Я хочу поместить кнопку в линию с надписью и ниже, чтобы она имела ввод по всей ширине. Я сделал следующее:

<div class="container">
   <label>Tralala</label>
   <input type="text" placeholder="Tralalala">
   <button type="tooltip" data="This is tralalala">This is tralalala</button>
</div>
<div class="container">
   <label>Tralala Tralalala Tralalala</label>
   <input type="text" placeholder="Tralala Tralalala Tralalala">
   <button type="tooltip" data="This is Tralala Tralalala Tralalala">This is Tralala Tralalala Tralalala</button>
</div>

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

.container {
    display: flex;
    flex-direction: column;
}
.container label { order: 0 }
.container input { order: 2 }
.container button {oder: 1 }

Но отсюда я не знаю, как сделать ярлык и кнопку встроенными

Answer 1

Вот так:

Измените направление изгиба на row и разрешите перенос.

Измените order, чтобы input следовал за другими элементами, а затем сделал его100% в ширину.

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 1em;
  border: 1px solid green;
  padding: 1em;
}

button {
  margin-left: 1em;
}

input {
  order: 2;
  flex: 0 0 100%;
  margin-top: 1em;
}

<div class="container">
  <label>Tralala</label>
  <input type="text" placeholder="Tralalala">
  <button type="tooltip" data="This is tralalala">This is tralalala</button>
</div>
<div class="container">
  <label>Tralala Tralalala Tralalala</label>
  <input type="text" placeholder="Tralala Tralalala Tralalala">
  <button type="tooltip" data="This is Tralala Tralalala Tralalala">This is Tralala Tralalala Tralalala</button>
</div>