button vs anchor vertical alignment

by ian_smithz

HTML

<a class="btn btn--addr fill text-left" data-value="16 Slades Green">
  
  <span class="addr-name">Mr&nbsp;Ian&nbsp;Smith</span>
  <span class="addr-line">16 Slades Green</span>
  <span class="addr-line">BRIDPORT</span>
  <span class="addr-line">Dorset</span>

  <!-- out a non-breaking space in between postcode parts -->
  <span class="addr-line">DT6 4EA</span>
</a>



<button class="btn btn--addr fill text-left" data-value="16 Slades Green">
  
  <span class="addr-name">Mr&nbsp;Ian&nbsp;Smith</span>
  <span class="addr-line">16 Slades Green</span>
  <span class="addr-line">BRIDPORT</span>
  <span class="addr-line">Dorset</span>

  <!-- out a non-breaking space in between postcode parts -->
  <span class="addr-line">DT6 4EA</span>
</button>

<style>
.btn--addr {
  margin-bottom: 18px;
  display: table-cell;
}

.btn--addr:after {
  content: "";
  display: block;
  vertical-align: top;
  min-height: 164px;
}
</style>

CSS

.btn {
  position: relative;
  display: inline-block;
  padding: 10px 24px 8px;
  background: #f6f6f6;
  background-image: -webkit-linear-gradient(top, #fcfcfc 0, #f6f6f6 50%, #f0f0f0 50%, #e7e7e7 100%);
  background-image: linear-gradient(to bottom, #fcfcfc 0, #f6f6f6 50%, #f0f0f0 50%, #e7e7e7 100%);
  border: 1px solid;
  border-radius: 5px;
  border-color: #d1d1d1;
  color: #636363;
  font-family: archivo_narrowbold, sans-serif;
  font-size: 18px;
  line-height: 100%;
  vertical-align: text-bottom;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  overflow: hidden;
}

.addr-line,.addr-name,.addr-title {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: Arial,Helvetica,sans-serif;
    font-weight: 700
}