I have a problem with a responsive table cell entry overwriting itself - html

Question

I am displaying some information in a normal table for desktop viewing. In that table long paragraphs of text wrap perfectly fine. But when it shift to mobile view, where the columns are all stacked the long text overwrites itself.
Normal Table View
Mobile Table View
Here is my html:
<div id="card">
<table class="table">
<thead class="thead-dark">
<tr>
<th>Date</th><th>User</th><th>Description</th><th>Text</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Date">2020-01-23 14:29:14</td><td data-label="User">Lylellen Hederstrom</td>
<td data-label="Desc">Owner Contact Information</td>
<td data-label="Text ">This code is owned by ZP Growers. 3824 Sunset Dr. Fallbrook, CA 92028</td>
</tr>
<tr>
<td data-label="Date">2020-01-28 15:41:26</td><td data-label="User">Lyle Kafader</td>
<td data-label="Desc">ZP Growers Purchase</td>
<td data-label="Text ">October 2014, $2500, TractorsPlus, Phoenix AZ. This is the story of bringing the tractor back to Valley Center. I had to borrow Riley's truck because my little Nissan could not haul a big enough trailer. The trailer that I rented didn't have sway bars which made for a very exciting trip through a windy desert.</td>
</tr>
</tbody>
</table>
</div>
Here is my CSS:
#media screen and (max-width: 760px) {
#card table {
border: 0;
table-layout: fixed;
width: 95%;
}
#card table thead {
display: none;
}
#card table tr {
margin-bottom: 20px;
dispaly: block;
border-bottom: 2px solid #ddd;
box-shadow: 2px 2px 1px #dadada;
height: auto;
}
#card table td {
display: block;
text-align: right;
font-size: 13px;
height: 100%;
width: 100%;
word-wrap: break-word;
}
#card table td::before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
#card tbody {
line-height:0!important;
}
}