JSFiddle - React, Tailwind, and code Playground

HTML

<table id="addition">
    <tbody>
        <tr>
            <td></td>
            <td>5</td>
            <td>1</td>
            <td>8</td>
        </tr>
        <tr>
            <td>+</td>
            <td>3</td>
            <td>7</td>
            <td>4</td>
        </tr>
        <tr class="resultat">
            <td><input type="text" maxlength="1" /></td>
            <td><input type="text" maxlength="1" /></td>
            <td><input type="text" maxlength="1 "/></td>
            <td><input type="text" maxlength="1" id="unite" /></td>
        </tr>
    </tbody>
</table>

CSS

input {
    color: inherit;
    background: inherit;
    font: inherit;
    border: none;
    width: 100%;
    text-align: center;
}
input:hover {
    outline: solid thin silver;
}
table {
    table-layout: fixed;
    border-collapse: collapse;
}
td {
    width: 1em;
    padding: 2px;
    text-align: center;
}
.resultat td {
    border-top: solid thin black;
}

JavaScript

var $unite = document.getElementById('unite');
var $addition = document.getElementById('addition');

Array.forEach(document.querySelectorAll('.resultat input'),
              function($input){
                  $input.value = '';
              });

$addition.addEventListener('keypress', function(e){
    var $target = e.target;
    
    // on cible un input
    if ($target.tagName !== 'INPUT') return;
    
    // on agit sur les nombres uniquement1
    if (e.charCode >= 48 && e.charCode <= 57) {
        var $previousTd = $target.parentNode.previousElementSibling;
        if ($previousTd) {
            var $previousInput = $previousTd.firstElementChild;
            $previousInput.select();
        }
    } else if (e.charCode && !e.ctrlKey && !e.altKey) {
        // on veut empêcher la saisie de caractères non numériques
        // tout en autorisant les commandes (Ctrl et Alt)
        e.preventDefault();
    }
});

$unite.focus();