JSFiddle - React, Tailwind, and code Playground

HTML

<table>
        <tr>
            <td>Serial Number: </td>
            <td><input type="text" maxlength="8" required></td>
        </tr>

        <tr>
            <td>MAC Address NIC: </td>
            <td>
                <select>
                    <option value="">Media</option>
                    <option value="eth">Ethernet</option>
                    <option value="inf">Infiniband</option>
                    <option value="fib">Fiber</option>
                </select>
                    
                <input type="text" maxlength="17">
            </td>
        </tr>
    </table>

CSS

:root {
	--main-color: rgb(46, 58, 150);
}

table, th, td {
    border: 1px solid var(--main-color);
    padding: 6px 8px;
	  white-space: nowrap;
}

table {
    border-collapse: collapse;
	  table-layout: fixed;
}

thead {
    background-color: #333;
    border-bottom: 3px solid var(--main-color);
}

thead th, thead a, thead a:visited {
    color: white;
}

th.active {
	  background: var(--main-color);
}

table > :not(thead) tr th {
    background-color: #333;
    border-right: 3px solid var(--main-color);
	color: white;
	text-align: right;
}

tr {
	height: auto;
}

td:first-child {
	text-align: right;
}

td {
    color: black;
}

input[type=text] {
    padding: 9px 10px;
    font-size: 16px;
}

select {
    padding: 9px 10px;
    font-size: 16px;
	height: 41px;
	min-width: 120px;
}

option {
	padding-top: 2px;
	padding-bottom: 2px;
}