CSS Table formatting with multiple items in one td - html

Question

So I am working on a form. And part of how I want the form to function requires a select box and an input(text) box in the same tr. The other items in that tr are just text boxes. I am having a problem getting the text box that shares a tr with the select to go to where the solo text box goes. Therefore, the right edges do not line up.
What I am looking for...
1) I want the text boxes that are solo to fill the box, ideally without adding width. I am fine with a min width of 550px, but not necessary.
2) I want the text boxes that are with the select to fill the rest of the box, meeting the same edge as the solo boxes. Satisfying OCD...
CSS for the table:
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 {
color: black;
}
table input {
width:100%; /* simply scale inputs to table cell size */
}
td.input-group input {
width:auto; /* but not for radios or checks */
}
HTML (shortened, just one solo text box and one that is sharing with the select):
<table>
<tr>
<td>Serial Number: </td>
<td><input type="text" name="device-serial-number" maxlength="8" required></td>
</tr>
<tr>
<td>MAC Address NIC: </td>
<td>
<select name="media-nic">
<option value="">Media</option>
<option value="eth">Ethernet</option>
<option value="inf">Infiniband</option>
<option value="fib">Fiber</option>
</select>
<input type="text" name="mac-nic" maxlength="17">
</td>
</tr>
</table>
Fiddle with more CSS and such: https://jsfiddle.net/2o0sn4ep/

Answer 1

You could use the trick marked as correct answer in this question
Using this nice "trick" I modified a bit your css and html (I added a div container to wrap your second input).
It's responsive as well, your inputs will always fill whatever width remaining in the container
:root {
--main-color: rgb(46, 58, 150);
}
* {
box-sizing: border-box;
}
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;
width: 100%;
}
select {
padding: 9px 10px;
font-size: 16px;
height: 41px;
float: left;
margin-right: 5px;
}
option {
padding-top: 2px;
padding-bottom: 2px;
}
div {
width: auto;
overflow: hidden;
}
<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>
<div>
<input type="text" maxlength="17">
</div>
</td>
</tr>
</table>