set top margin in a display:table structure

[geotso]

I have these rules:

.tbl {
	display: table;
}
.row {
	display: table-row;
}
.th, .td {
	display: table-cell;
}
.th {
	padding-top: 0;
}
.td {
	padding-top: 42px;
}

for the following html:

<div class="tbl">
  <div class="row">
    <div class="th">sample text</div>
    <div class="td">Header</div>
  </div>
</div>

Well, despite "padding-top:0" both divs get the maximum value of each other (42px in this case).

How can I set a different distance from the top for any of them?

Thanks

[Jon Fritz]

What ais the intended outcome of your "table"?

It will likely be much simpler to use css flexbox or grid, than to recreate a table-based layout with the seldom used table display properties...

Flexbox: https://www.w3schools.com/css/css3_flexbox.asp
Grid: https://www.w3schools.com/css/css_grid.asp