JSFiddle - React, Tailwind, and code Playground
HTML
<div class="inANDout">
<table>
<tr class="top">
<td class="inANDoutOpcoes">Opções</td>
<td class="inANDoutTipo">Tipo de Valor</td>
<td class="inANDoutTotal">Valor Total</td>
<td class="inANDoutParcelas">Nº de Parcelas</td>
<td class="inANDoutAtual">Parcela Atual</td>
<td class="inANDoutValor">Valor da Parcela</td>
<td class="inANDoutData">Data de Saída/Entrada</td>
</tr>
<tr class="dados">
<td class="dadosOpcoes">Opções</td>
<td class="dadosTipo">Tipo de Valor</td>
<td class="dadosTotal">Valor Total</td>
<td class="dadosParcelas">Nº de Parcelas</td>
<td class="dadosAtual">Parcela Atual</td>
<td class="dadosValor">Valor da Parcela</td>
<td class="dadosData">Data</td>
</tr>
</table>
</div>
CSS
.inANDout table {
text-transform: uppercase;
margin: 0 auto;
color: #595c62;
font-size: 0.6em;
font-family: 'verdana';
text-align: center;
width: 89.2em;
display: flex;
}
.inANDout .top td {
float: left;
border-bottom: 2px solid #595c62;
border-right: 2px solid #595c62;
padding: 0.6em 0.3em;
vertical-align: baseline;
}
tr.top {
width: 100%;
display: flex;
}
.inANDout td.inANDoutData {
height: 2.5em;
border-right: 0 !important;
width: 9em;
}
.inANDout td.inANDoutOpcoes {
width: 6em;
height: 1.3em;
margin-top: 1.3em;
}
.inANDout td.inANDoutTipo {
width: 31em;
height: 1.3em;
margin-top: 1.3em;
}
.inANDout td.inANDoutTotal {
width: 12em;
height: 1.3em;
margin-top: 1.3em;
}
.inANDout td.inANDoutParcelas {
width: 7em;
height: 2.5em;
}
.inANDout td.inANDoutAtual {
width: 7em;
height: 2.5em;
}
.inANDout td.inANDoutValor {
width: 11em;
height: 1.3em;
margin-top: 1.3em;
}
tbody {
margin: 0 auto;
}
.inANDout tr.dados td {
float: left;
border-right: 2px solid #595c62;
padding: 0.6em 0.3em;
vertical-align: baseline;
}
.inANDout td.dadosOpcoes {
width: 6em;
height: 1.2em;
margin-top: 1.3em;
}
.inANDout td.dadosTipo {
width: 31em;
height: 1.2em;
margin-top: 1.3em;
}
.inANDout td.dadosTotal {
width: 12em;
height: 1.2em;
margin-top: 1.3em;
}
.inANDout td.dadosParcelas {
width: 7em;
height: 2.5em;
}
.inANDout td.dadosAtual {
width: 7em;
height: 2.5em;
}
.inANDout td.dadosValor {
width: 11em;
height: 1.2em;
margin-top: 1.3em;
}
.inANDout td.dadosData {
margin-top: 1.3em;
width: 9em;
height: 2.5em;
border-right: 0 !important;
}
tr.dados {
width: 100%;
display: flex;
}