Projeto Pessoal: Resultado no lugar dos input | JavaScript: programando na linguagem da web

Resolvi desenvolver um programinha junto com o das aulas desse curso como uma forma de me testar. É bem simples, é um programa que multiplica e divide 2 números aleatórios. Na última aula que vi, o professor estava adicionando nomes a tabela de nutrição. Mas no meu projeto pensei em colocar o resultado exatamente no lugar dos inputs. Mas não sei como fazer isso :/

Segue os códigos pra entenderem melhor :

HTML

<body>
    <h1>Multiplicando e Dividindo</h1>

    <form id="formulario-calculo">
        <fieldset id="qual-valor1">    
                <label for="valor1">Digite o primeiro número</label>
                <input id="valor1" name="valor1" type="text" required>
        </fieldset> 
        <fieldset id="qual-valor2">   
                <label for="valor2">Digite o segundo número</label>
                <input id="valor2" name="valor2" type="text"required>
        </fieldset> 
        <button type="submit" id="botao-calcular"><strong>Calcular</strong></button>
    </form>

    <script>
    var botaoCalcular = document.querySelector("#botao-calcular");
    botaoCalcular.addEventListener("click", function(event) {
        event.preventDefault();

        var form = document.querySelector("#formulario-calculo");

        var valor1 = form.valor1.value; 
        var valor2 = form.valor2.value;

        var multiplicacao = (valor1 * valor2);
        var divisao = (valor1 / valor2);

        document.write("Multiplicando os dois valores teremos: " + multiplicacao + "<br>");
        document.write("Dividindo os dois valores teremos: " + divisao);
    })
    </script>
</body>

CSS

* {
padding:0;
margin:0;
vertical-align:baseline;
list-style:none;
}

fieldset {
    border:none;
}

body {
    width: 100%;
    background-color: darkblue;
    color: #69F;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

h1 {
    color: #fff;
    font-size: 30px;
    margin: 30px; 
}

#valor1, #valor2 {
    width: 100px;
    border-radius: 30px;
    margin-bottom: 20px;
    margin-left: 46.5%;
    margin-right: 46.5%;
    box-sizing: border-box;
    padding-left: 0.5em;
}    

#botao-calcular {
    width: 150px;
    height: 50px;
    border-radius: 30px;
    margin-top: 20px;
    text-transform: uppercase;
    background-color: lightgreen;
    color: darkblue;
}

Oi Hellen tudo bem?

Veja se é isso que precisa:

<body>
    <h1>Multiplicando e Dividindo</h1>

    <form id="formulario-calculo">
        <fieldset id="qual-valor1">    
                <label for="valor1" id="label_valor1">Digite o primeiro número</label>
                <input id="valor1" name="valor1" type="text" required>
        </fieldset> 
        <fieldset id="qual-valor2">   
                <label for="valor2" id="label_valor2">Digite o segundo número</label>
                <input id="valor2" name="valor2" type="text"required>
        </fieldset> 
        <button type="submit" id="botao-calcular"><strong>Calcular</strong></button>
    </form>

    <script>
    var botaoCalcular = document.querySelector("#botao-calcular");
    botaoCalcular.addEventListener("click", function(event) {
        event.preventDefault();

        var form = document.querySelector("#formulario-calculo");

        var valor1 = form.valor1.value; 
        var valor2 = form.valor2.value;

        var multiplicacao = (valor1 * valor2);
        var divisao = (valor1 / valor2);


        document.getElementById("label_valor1").innerText="Multiplicando os dois valores teremos: ";
        document.getElementById("label_valor2").innerText="Dividindo os dois valores teremos: ";


        document.getElementById("valor1").value=multiplicacao;
        document.getElementById("valor2").value=divisao;

    })
    </script>
</body>

Espero ter ajudado!!!