<div class="
calculation-bmi">
  <p class="caption">BMIを計算しましょう!</p>
  <form oninput="bmi.value = Math.floor((weight.value / ((height.value / 100) * (height.value / 100))) * 10) / 10">
    <p>
      <label>体重:</label>
      <input name="weight" type="number" placeholder="例 60">
      <span>kg</span>
    </p>
    <p>
      <label>身長:</label>
      <input name="height" type="number" placeholder="例 170">
      <span>cm</span>
    </p>
    <p>
      <label class="result-bmi">BMI:</label>
      <output name="bmi"></output>
    </p>
  </form>
</div>
.calculation-bmi label{
  font-size: 13px;
  font-weight: bold;
  margin: 0 10px;
}

.calculation-bmi .caption{
  font-size: 16px;
  font-weight: bold;
  margin: 0 10px;
}

.calculation-bmi form p input{
  width: 80px;
  height: 40px;
  text-align: center;
  font-size: 18px;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid #333;
}

.calculation-bmi form p output{
  font-size: 16px;
  font-weight: bold;
}

.calculation-bmi form p span{
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  margin: 0 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.