JSFiddle - React, Tailwind, and code Playground

HTML

<table class="resptable">
	<thead>
	<tr>
		<th>PRODUCT</th>
		<th>HEIGHT</th>
		<th colspan="3">STANDARD ROLL OPTIONS</th>
                <th colspan="3">STANDARD MODULE OPTIONS</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Frontrunner Plus</td>
		<td>14 <br>(9/16")</td>
		<td>10 x 0.6 m <br>(33' x 2')</td>
		<td>10 x 0.91 m <br>(33' x 3')</td>
		<td>5 x 1.2 m <br>(16' x 3'11")</td>
		<td>0.8 x 1.2 m <br>(2'7" x 3'11")</td>
		<td>1 x 1.5 m <br>(3'3" x 4'11")</td>
		<td>1.1 x 2 m <br>(3'7" x 6'7")</td>
	</tr>
        <tr>
		<td>Low Profile</td>
		<td>10.5 <br>(13/32")</td>
		<td>10 x 0.6 m <br>(33' x 2')</td>
		<td>10 x 0.91 m <br>(33' x 3')</td>
		<td>5 x 1.2 m <br>(16' x 3'11")</td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	</tbody>
    </table>

CSS

@media 
only screen and (max-width: 800px)  {

table.resptable, .resptable thead, .resptable tbody, .resptable th, .resptable td, .resptable tr { 
    display: block;
	text-align: left;
}

.resptable thead tr { 
    display: none;
}

.resptable tr { 
    border-bottom: 6px solid #90cbf5; 
	padding-bottom: 6px;
}

.resptable td { 
    border: none;
    border-top: 1px solid #90cbf5; 
    position: relative;
    padding-left: 64%; 
}

.resptable td:before { 
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
}

/*
Label the data
*/
.resptable td:nth-of-type(1):before { content: "Product"; }
.resptable td:nth-of-type(2):before { content: "Height"; }
.resptable td:nth-of-type(3):before { content: "Standard roll options";}
.resptable td:nth-of-type(6):before { content: "Standard module options"; }
}

.resptable td:empty:before{
    display:none;
}