JSFiddle - React, Tailwind, and code Playground

HTML

<main class="main">
	<div class="wrapper">
		<div class="container">
			<div class="col-12 row-6">
				<div class="box">
					<div class="title">Customer overview</div> 
					<div class="content">
						<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">Postal code</div>
								<div class="flex-4 td">City</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</main>

CSS

.wrapper {
    margin: 0 2%;
}
.container { 
	max-width: 500px; justify-content: space-between; flex-wrap: wrap; margin-left: auto; margin-right: auto; overflow: hidden; box-sizing:border-box;
}
.row-6 {
    margin-bottom: 30px;
}
.col-12 {
    flex-basis: 100%;
}
.box {
    border: 1px solid black; position: relative; flex-basis: 100%;
}
	.box .title {
	    padding: 15px 20px;
	}
	.box .content {
	    padding: 20px;
	}

.flex-1 { flex:1; }
.flex-2 { flex:2; }
.flex-3 { flex:3; }
.flex-4 { flex:4; }
.flex-5 { flex:5; }

.table {
	width: 100%; 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; min-width: 70px;
	}
	.table .td-1 {
		flex: 0 0 55px; text-align: center;
	}