JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Calculo de Notas da Escola</h1>
	<p id="inst">Insina as notas do AVA e da Prova nos seus respectivos campos.</p>
<form class="" method="post">
	<fieldset id="licen">
		<legend>Calculo da Licenciatura/bacharelado</legend>
		<p><label for="licAva">AVA:</label><input type="number" name="lAva" id="licAva" value ="0" min="0" max="10" value="0"></p>
		<p><label for="licProv">Prova:</label><input type="number" name="lProv" id="licProv" value="0" min="0" max="10" value=""></p>
		<p><label for="licM">Média:</label><input type="text" name="lMed" id="licM" value="0" placeholder="Nota da Média" readonly></p>
	</fieldset>
	<fieldset id="tec"><legend>Calculo de Notas Tecnologia</legend>
		<p><label for="avaTec">AVA: </label><input type="number" name="tAva" id="avaTec" min="0" max="10" value=""> </p>
		<p><label for="cPim"> PIM: </label><input type="number" name="tPim" id="cPim" min="0" max="10" value=""></p>
		<p><label for="provaTec">PROVA: </label> <input type="number" name="tProva" id="provaTec" min="0" max="10" value=""></p>
		<p><label for="mediaTec"> Média: </label><input type="number" name="tMedia" id="mediaTec" placeholder="Nota da Média" readonly></p>
	</fieldset>
</form>

CSS

h1{
		text-align: center;
		font-family: cursive, sans-serif;
	}
	p#inst{
		text-align: center;
		font-family: cursive, sans-serif;	
		font-size: 13pt;
	}
	form{
		width: 500px;
		margin: auto;
	}
		fieldset legend{
			text-align: center;
			font-weight: bold;
			text-transform: uppercase;
			font-family: Arial, sans-serif;
		}
		fieldset#licen {
			margin-bottom: 25px;
		}
		fieldset#licen input#licM, fieldset#tec input#mediaTec{
			background-color: #dddddd;
		}

JavaScript

//Variáveis do campo AVA, PROVA, MÉDIA e valores padrão do formulário
var avaInput = document.getElementById("licAva");
var provaInput = document.getElementById("licProv");
var resultado = document.getElementById("licM");
 
//Calcula a média quando mudar o valor no campo AVA   
avaInput.addEventListener("change", function(e) {
        var avaInputValor = document.getElementById("licAva").value;
        var provaInputValor = document.getElementById("licProv").value;
        var resultado = document.getElementById("licM");
        
        //Insere o resultado do cálculo no campo input da média
        resultado.value = mediaLIC(avaInputValor,provaInputValor);
       
}, false);

//Calcula a média quando mudar o valor no campo prova
provaInput.addEventListener("change", function(e) {
        var avaInputValor = document.getElementById("licAva").value;
        var provaInputValor = document.getElementById("licProv").value;
        var resultado = document.getElementById("licM");
        
        //Insere o resultado do cálculo no campo input da média
        resultado.value = mediaLIC(avaInputValor,provaInputValor);
       
}, false);

   //Função para calcular a média 
   function mediaLIC(ava, prova){
       var media;
       media = ((ava*1)+(prova*9)/10);
       
   	   return media;
   }