JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scroll-container">
  <div class="table">
  <div class="table__head">
    <div class="table__id">id</div>
    <div class="table__address">Address</div>
    <div class="table__number">3rdColumn</div>
    <div class="table__number">4thColumn</div>
    <div class="table__number">5thColumn</div>
  </div>
  <a href="#" class="table__row">
    <div class="table__id">1934</div>
    <div class="table__address">Fieldstone Drive North Miami Beach, FL 33160</div>
    <div class="table__number"></div>
    <div class="table__number"></div>
    <div class="table__number"></div>
  </a>
  <a href="#" class="table__row">
    <div class="table__id">34</div>
    <div class="table__address">Grove Street Macon, GA 31204</div>
    <div class="table__number"></div>
    <div class="table__number"></div>
    <div class="table__number"></div>
  </a>
</div>
</div>

CSS

.scroll-container {
  width: 300px;
  overflow-x: scroll;
  border: 1px solid #eee;
}

.table__head, .table__row {
  display: flex;
}

.table__head > *, .table__row > * {
  border: 1px solid black;
}

.table__head > * {
  overflow: hidden;
  text-overflow: ellipsis;
}

.table__row {
  text-decoration: none;
  color: #000;
}

.table__id {
  width: 10%;
  min-width: 40px;
}

.table__number {
  min-width: 30px;
  width: 8%;
}

.table__address {
  flex: 1;
}