JSFiddle - React, Tailwind, and code Playground

by 2Yootz

HTML

<div class="div-table">
    <div class="div-table-head-row">
        <div class="div-table-head-cell">Type</div>
        <div class="div-table-head-cell">Score</div>
    </div>
    <div class="div-table-body-row rowodd">
        <div class="div-table-body-cell">Paper Score</div>
        <div class="div-table-body-cell">
            <input type="text" name="toefl_paper" />
        </div>
    </div>
    <div class="div-table-body-row roweven">
        <div class="div-table-body-cell">Computer Score</div>
        <div class="div-table-body-cell">
            <input type="text" name="toefl_computer" />
        </div>
    </div>
    <div class="div-table-body-row rowodd">
        <div class="div-table-body-cell">Internet Score</div>
        <div class="div-table-body-cell">
            <input type="text" name="toefl_internet" />
        </div>
    </div>
</div>

CSS

.div-table {
    display:table;
    width:auto;
    border:3px double #DCDCDC;
}
.div-table-head-cell, .div-table-body-cell {
    display:table-cell;
    padding:2px;
    border: 1px solid #DCDCDC;
    font-size:14px;
}
.div-table-head-cell {
    background-color:#EEE0b9;
    text-align: center;
    font-weight:bold;
}
.div-table-head-row, .div-table-body-row {
    /* needed a distinction to handle alternating rows */
    display:table-row;
    width:auto;
}
.rowodd {
    background-color: #FFFFFF;
}
.roweven {
    background-color: #F8F2E2;
}
/*
THIS MOSTLY WORKS. CHROME SEES THE FIRST, BODY ROW OCCURRANCE AS EVEN.  THIS SHOULD BE ODD.  PROBABLY DUE TO THE FACT THAT IT IS THE SECOND OVERALL CHILD (WITH THE FIRST BEING THE HEADER ROW).

.div-table-body-row:nth-child(even) {
    background-color: #F8F2E2;
}
.div-table-body-row:nth-child(odd) {
    background-color: #FFFFFF;
}
*/