Padding-left not working - css

Question

I'm trying to emulate the code in Responsive Data Table to reformat a table where a row is vertical. My difference is that I want only a single row (an edited row) to be vertical and the rest normal.
tr.utr {
display: block;
border: 1px solid #ccc;
}
td.utd {
display: block;
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 30%;
}
td.utd:before {
position: absolute;
top: 6px;
left: 6px;
width: 60%;
padding-right: 10px;
white-space: nowrap;
}
td.utd:nth-of-type(1):before {
content: "First";
}
td.utd:nth-of-type(2):before {
content: "Second";
}
td.utd:nth-of-type(3):before {
content: "Third";
}
<table>
<thead>
<tr>
<th>Address</th>
<th>Status</th>
<th>Query</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan=3>Copy of https://css-tricks.com/responsive-data-tables/</td>
</tr>
<tr>
<td>100 Central Ave.</td>
<td>Listings</td>
<td><input type="checkbox"></td>
</tr>
<tr class="utr">
<td class="utd">
<input type="text" value="123 Main Street" style="width:200px">
</td>
<td class="utd"><select>
<option value="1">Listings</option>
<option value="2">Solds</option>
</select></td>
<td class="utd"><input type="checkbox" checked="checked"></td>
</tr>
<tr>
<td>666 Oceanview Rd.</td>
<td>Listings</td>
<td><input type="checkbox" checked="checked"></td>
</tr>
</tbody>
</table>
Here's my Fiddle: https://jsfiddle.net/ImTalkingCode/k1pcc1nh/4/
In the fiddle, both the content label (eg. First) and the input fields are padded over by the 30% and are not aligned at all like the css-tricks example. Any help?
Screenshot with the bug

Answer 1

Based on the code from css tricks that you offered, I simply added the classes that we needed.
Resize your screen/browser to see the effect you wanted.
Generic Styling, for Desktops/Laptops
*/
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
#media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Hide table headers (but not display: none;, for accessibility) */
tr.utr { border: 1px solid #ccc;
display: flex;
flex-direction: column;}
td.utd {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 30%;
}
td.utd:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
td.utd:nth-of-type(1):before { content: "First"; }
td.utd:nth-of-type(2):before { content: "Second"; }
td.utd:nth-of-type(3):before { content: "Third"; }
}
<table>
<thead>
<tr>
<th>Address</th>
<th>Status</th>
<th>Query</th>
</tr>
</thead>
<tbody>
<tr>
<td>100 Central Ave.</td>
<td>Listings</td>
<td><input type="checkbox"></td>
</tr>
<tr class="utr">
<td class="utd">
<input type="text" value="123 Main Street" style="width:100%">
</td>
<td class="utd"><select>
<option value="1">Listings</option>
<option value="2">Solds</option>
</select></td>
<td class="utd"><input type="checkbox" checked="checked"></td>
</tr>
<tr>
<td>666 Oceanview Rd.</td>
<td>Listings</td>
<td><input type="checkbox" checked="checked"></td>
</tr>
</tbody>
</table>
If you don't want it to be responsive, just delete the #media query.

Answer 2

I think this will help you
https://jsfiddle.net/31rg4ued/.
If you adjust the width of input element based on the padding, you will get the expected output
tr.utr {
display: block;
border: 1px solid #ccc;
}
td.utd {
display: block;
border: none;
border-bottom: 1px solid #eee;
position: relative;
}
td.utd:before {
}
td.utd:nth-of-type(1):before {
content: "First";
}
td.utd:nth-of-type(2):before {
content: "Second";
}
td.utd:nth-of-type(3):before {
content: "Third";
}
<table>
<thead>
<tr>
<th>Address</th>
<th>Status</th>
<th>Query</th>
</tr>
</thead>
<tbody>
<tr>
<td>100 Central Ave.</td>
<td>Listings</td>
<td><input type="checkbox"></td>
</tr>
<tr class="utr" style="padding-left:30%">
<td class="utd">
<input type="text" value="123 Main Street" style="width:calc(100% - 30%)">
</td>
<td class="utd"><select>
<option value="1">Listings</option>
<option value="2">Solds</option>
</select></td>
<td class="utd"><input type="checkbox" checked="checked"></td>
</tr>
<tr>
<td>666 Oceanview Rd.</td>
<td>Listings</td>
<td><input type="checkbox" checked="checked"></td>
</tr>
</tbody>
</table>