Contenteditable inside table cell

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <tr>
        <td><input type="text" /></td>
         <td><input type="text" /></td>
        <td><div class="contendeditable" contenteditable="true"></div></td>
      </tr>
    </table>
  </body>
</html>

CSS

* {
  box-sizing: border-box;
}

table {
  width: 100%;
}

td {
  width: 33.333333%;
}

input {
  width: 100%;
  height: 32px;
  border: 1px solid #dedede;
}

.contendeditable {
  padding-left: 10px;
  height: 32px;
  border: 1px solid red;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  line-height: 32px;
}