JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
  <div class="th">
    <div class="flex-1 td-1"><input type="checkbox"></div>
    <div class="flex-2 td">#</div>
    <div class="flex-2 td">Salution</div>
    <div class="flex-4 td">Name</div>
    <div class="flex-5 td">Address</div>
    <div class="flex-3 td">Postal code</div>
    <div class="flex-4 td">City</div>
  </div>
  <div class="tr">
    <div class="flex-1 td-1"><input type="checkbox" value="2635"></div>
    <div class="flex-2 td">2635</div>
    <div class="flex-2 td">Sir</div>
    <div class="flex-4 td">Name, K</div>
    <div class="flex-5 td">Street 6</div>
    <div class="flex-3 td">?</div>
    <div class="flex-4 td">City</div>
  </div>
</div>

CSS

.flex-1 {
  flex: 1;
  min-width: 1em;
}

.flex-2 {
  flex: 2;
  min-width: 2em;
}

.flex-3 {
  flex: 3;
  min-width: 3em
}

.flex-4 {
  flex: 4;
  min-width: 4em;
}

.flex-5 {
  flex: 5;
  min-width: 5em;
}

.table {
  max-width: 500px;
  overflow-x: scroll;
}

.table [class*='flex-'] {
  margin-left: 0;
  margin-right: 0;  

}

.table .tr,
.table .th {
  display: flex;
  margin: 0;
  
}

.table [class*='td'] {
  margin: 0;
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid gray;
}