[FIXED] Why does display:block affect vertical alignment in Firefox?

Issue

See the code below. This looks alright in Chrome and Edge, but it aligns the text to the bottom in Firefox. Also check this CodePen in different browsers to see what I mean. What is causing this?

.table {display:table;}
.row {display:table-row;}
.cell{display:table-cell;}
.input input{display:block; margin:10px 0;}

<div class="table">
  <div class="row">
    <div class="cell txt">
      This is text
    </div>
    <div class="cell input">
      <input type="txt">
    </div>
  </div>  
  <div class="row">
    <div class="cell txt">
      This is text
    </div>
    <div class="cell input">
      <input type="txt">
    </div>
   </div> 
</div>

Solution

To fix this, you can add vertical-align: middle; to your .cell class. Also, I'd create the vertical spacing around items using padding inside the .cell itself. That way, all cells share the same spacing.

.table {display: table;}
.row {display: table-row;}

.cell {
  display: table-cell;
  padding: 0 0 10px 0;
  vertical-align: middle;
}

.input input {
  display: block;
  padding: 20px;
}

<div class="table">
  <div class="row">
    <div class="cell txt">
      This is text
    </div>
    <div class="cell input">
      <input type="txt">
    </div>
  </div>  
  <div class="row">
    <div class="cell txt">
      This is text
    </div>
    <div class="cell input">
      <input type="txt">
    </div>
   </div> 
</div>

Answered By - mfluehr

Answer Checked By - Timothy Miller (PHPFixing Admin)