Show drop down only on overflow div

Question

CSS Code

.table {
  display: grid;
  grid-template-columns: 170px 300px;
  border: 1px solid black;
}
.tr {
  display: contents;
}
.td {
  border-left: 1px solid black;
  overflow: hidden;
  text-overflow: ellipsis;
}

JSX code

import "./styles.css";

export default function App() {
  return (
    <div className="table">
      <div className="tr">
        <div className="td">
          abcsfsaffadsfsdfsafsdsfsadfdasdfasfasdffasfasfasdfsd
        </div>
        <div className="td">abcsfs</div>
      </div>
    </div>
  );
}

You can see the code at Codesandbox

You can see that we have first column overflow, but second column not

When hover I hope to display a boxes for overflow column only to show full text, like the following

The problem is how to detect whether a div column is overflow for showing the box?