Pretty displayed input in table

HTML

<table>
<tbody>
  <tr>
    <td>Blue is greener than purple for sure</td>
    <td class="right">
      <span class="value">1 000 €</span>
    </td>
  </tr>
  <tr>
    <td>The far other promises into the southern stroke</td>
    <td class="right">
      <span class="holder">
        <span class="value">2 340 €</span>
        <input type="number" value="2340"/>
      </span>
    </td>
  </tr>
  <tr>
    <td>The boundless can't end the line</td>
    <td class="right">
      <span class="holder">
        <span class="value">760 €</span>
        <input type="number" value="760"/>
      </span>
    </td>
  </tr>
  <tr>
    <td>Far beyond driven</td>
    <td class="right">
      <span class="value">200 €</span>
    </td>
  </tr>
</tbody>
</table>

CSS

table, th, td {
   border: 1px solid black;
}
table{
  font-size: 1rem;
  font-family: Arial;
  border-collapse: collapse;
}
table td{
  padding:10px 20px;
}

td.right{
  text-align: right;
}




td .holder{
  position: relative;
}
td .holder>input{
  /*display: none;*/
  font-size: 1rem;
  font-family: Arial;
  border: solid 1px grey;
  background-color: rgb(213, 213, 213);
  position: relative;
  padding: 0;
  opacity: 0;
}
td .holder>.value{
  display: inline-block;
  border: solid 1px grey;
  background-color: rgba(0,0,0,.05);
  position: absolute;
  right: 0; left: 0;
}
td.right .holder>input{
  text-align: right;
}
td.right .holder>.value{
  text-align: right;
}
td .holder>input:focus{
  opacity: 1;
}