Search code examples
htmlcssbuttonvertical-alignment

Vertically align buttons with wrapped text, side by side

I want to show multiple buttons side by side, which is not the problem.
But I have one or more buttons with wrapped text because the button is too small (this should be).

If the text of one button is wrapped, they do not appear correctly side by side.
The button with wrapped text is lower than the other.
What causes this and how can I prevent it?

.container {
  width: 200px;
  border: 1px solid black;
}
button {
  width: 50%;
  height: 40px;
}
<div class="container">
  <button>TEST</button><button>TEST WRAPPED TEXT</button>
</div>

Solution

  • buttons are inline elements which are aligned baseline vertically by default...

    ...so use vertical-align:top to button...

    Stack Snippet

    .container {
  width: 200px;
  border: 1px solid black;
}

button {
  width: 50%;
  height: 40px;
  vertical-align: top;
}
    <div class="container">
  <button>TEST</button><button>TEST WRAP TEXT</button>
</div>