I am trying to align the button next to the label and have the input field take up the full width below them. Here is what I have attempted:
<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>
Unfortunately, I was unable to nest the button inside the label so I had to resort to using CSS to achieve the desired layout. Here is my CSS code:
.container {
display: flex;
flex-direction: column;
}
.container label { order: 0 }
.container input { order: 2 }
.container button {oder: 1 }
However, I am stuck on how to align the label and button inline with each other.