[FIXED] How to align these buttons in a row?

Issue

https://jsfiddle.net/2L9mznzu/

There are two empty text button, how to align them into a row?

.button {
  display: inline-block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: gray;
  margin: 0 4px;
  text-align: center;
}

<div class="button">
</div>
<div class="button">Button
</div>
<div class="button">
</div>

Solution

Use vertical-align: top property to your .button.

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box. Source: MDN

See demo below:

.button {
  display: inline-block;
  vertical-align: top;
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: gray;
  margin: 0 4px;
  text-align: center;
}

<div class="button">
</div>
<div class="button">Button
</div>
<div class="button">
</div>

Answered By - kukkuz

Answer Checked By - Cary Denson (PHPFixing Admin)