Edit in JSFiddle

"use strict";
 
const rvd_app= new Vue({
  el: '#resistance-voltage-divider-app',
  data: {
    vin: 5.000,
    vout: 0,
    r1: 800,
    r1_unit: "Ω",
    r2: 1.2,
    r2_unit: "kΩ",
    r1_ratio: 0,
    r2_ratio: 0,
    r1_voltage: 0,
    r2_voltage: 0,
    vue_ver: Vue.version,
  },
  computed: {
    calc_vout: function() {
      let r1_u = this.get_resistance_unit_value(this.r1_unit);
      let r2_u = this.get_resistance_unit_value(this.r2_unit);
      this.get_resistance_ratio();
      this.get_resistance_voltage();
      this.vout = this.r2 ? (this.r2 * r2_u) / ((this.r1 * r1_u) + (this.r2 * r2_u)) * this.vin : this.vin;
      return this.vout;
    },
    calc_vout_ampere: function() {
      let r2_u = this.get_resistance_unit_value(this.r2_unit);
      return this.r2 ? this.vin / (this.r2 * r2_u) : 0;
    },
  },
  methods: {
    get_resistance_unit_value: function(unit) {
      if (unit == "mΩ") return 0.001;
      else if (unit == "Ω") return 1;
      else if (unit == "kΩ") return 1000;
      else if (unit == "MΩ") return 1000000;
    },
    get_resistance_ratio: function() {
      let r1_u = this.get_resistance_unit_value(this.r1_unit);
      let r2_u = this.get_resistance_unit_value(this.r2_unit);
      let r1 = this.r1 * r1_u;
      let r2 = this.r2 * r2_u;
      this.r1_ratio = r1 / r1;
      this.r2_ratio = r2 / r1;
    },
    get_resistance_voltage: function() {
      this.r1_voltage = this.vin / (this.r1_ratio + this.r2_ratio) * this.r1_ratio;
      this.r2_voltage = this.vin / (this.r1_ratio + this.r2_ratio) * this.r2_ratio;
    },
  },
});

<div id="resistance-voltage-divider-app">
  <h3>抵抗分圧 リアルタイムけいさんき🤤</h3>
  <div class="schematic">
    <div class="img"></div>
    <div class="vin">
      <input class="num" type="text" v-model.number="vin" disabled/>&nbsp;V
    </div>
    <div class="vout">
      <input class="num" type="text" v-model.number="vout" disabled/>&nbsp;V
    </div>
    <div class="r1">
      <input class="num" type="text" v-model.number="r1" disabled/>
      &nbsp;
      <label class="val">{{ r1_unit }}</label>
    </div>
    <div class="r2">
      <input class="num" type="text" v-model.number="r2" disabled/>
      &nbsp;
      <label class="val">{{ r2_unit }}</label>
    </div>
  </div>
  <table class="rvd-tbl">
    <tr>
      <td rowspan="2">
        <label class="val">Vout:</label><br />
        <input class="num" type="text" column="5"  v-model.number="calc_vout" disabled />
      </td>
      <td rowspan="2">&nbsp;V&nbsp;＝&nbsp;</td>
      <td colspan="5">
        <label class="val">R2:</label>
        <input class="num" type="text" v-model.number="r2" disabled/>
        &nbsp;<label class="val">{{ r2_unit }}</label>
      </td>
      <td rowspan="2">&nbsp;×&nbsp;</td>
      <td rowspan="2">
        <label class="val">Vin:</label><br />
        <input class="num" type="text" min="0" step="1" v-model.number="vin" />
      </td>
      <td rowspan="2">V</td>
    </tr>
    <tr>
      <td>
        <label class="val">R1:</label>
        <input class="num" type="number" min="0" step="1" v-model.number="r1" />
      </td>
      <td>
        <select v-model="r1_unit">
          <option value="mΩ">mΩ</option>
          <option value="Ω">Ω</option>
          <option value="kΩ">kΩ</option>
          <option value="MΩ">MΩ</option>
        </select>
      </td>
      <td>＋</td>
      <td>
        <label class="val">R2:</label>
        <input class="num" type="number" min="0" step="1" v-model.number="r2" />
      </td>
      <td>
        <select v-model="r2_unit">
          <option value="mΩ">mΩ</option>
          <option value="Ω">Ω</option>
          <option value="kΩ">kΩ</option>
          <option value="MΩ">MΩ</option>
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="2"></td>
      <td>
        <input class="num" type="text" v-model.number="r1_ratio" disabled/>
      </td>
      <td />
      <td>:</td>
      <td>
        <input class="num" type="text" v-model.number="r2_ratio" disabled/>
      </td>
      <td colspan="4" />
    </tr>
    <tr>
      <td colspan="2"></td>
      <td>
        <input class="num" type="text" v-model.number="r1_voltage" disabled/>
      </td>
      <td>V</td>
      <td>:</td>
      <td>
        <input class="num" type="text" v-model.number="r2_voltage" disabled/>
      </td>
      <td colspan="4">V</td>
    </tr>
    <tr>
      <td colspan="4"></td>
      <td colspan="3">
        <label class="val">Vout(A):</label>
        <input class="num" type="text" v-model.number="calc_vout_ampere" disabled />
        &nbsp;mA
      </td>
      <td colspan="3" />
    </tr>
  </table>
  <p>Vue.js version: {{ vue_ver }}</p>
</div>

$font-family1: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial;
$font-family2: /*"ヒラギノ角ゴ ProN W3",*/ "Hiragino Kaku Gothic ProN", /*"メイリオ",*/ Meiryo;
$font-family3: sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

body {
  font-family: $font-family1, $font-family2, $font-family3;
  font-size: 16px;
  background-color: #f5f4ef;
}

#resistance-voltage-divider-app {
  input.num, input.val {
    text-align: right;
    width: 48px;
  }
  * {
    margin: 0;
  }
}
.schematic {
  .img {
    background-image: url(https://www.tomoyan.net/_media/electronics/resistance_voltage_divider.png?cache=);
    background-size: cover;
    width: 300px;
    height: 279px;
    position: relative;
    left: 100px;
  }
  .schematic_item_base {
    position: relative;
    float: left;
  }
  .vin {
    @extend .schematic_item_base;
    left: 163px;
    top: -157px;
  }
  .vout {
    @extend .schematic_item_base;
    left: 285px;
    top: -157px;
  }
  .r1 {
    @extend .schematic_item_base;
    left: 174px;
    top: -204px;
  }
  .r2 {
    @extend .schematic_item_base;
    left: 93px;
    top: -97px;
  }
  padding: 12px;
}

.rvd-tbl {
  clear: left;
  
  td {
    border-collapse: collapse;
    white-space: nowrap;
    text-align: center;
    //border: solid 1px;
  }

  tr:nth-child(1) td:nth-child(3) {
    border-bottom: solid 1px;
  }

  tr:nth-child(3) td:nth-child(2),
  tr:nth-child(3) td:nth-child(5),
  tr:nth-child(4) td:nth-child(2),
  tr:nth-child(4) td:nth-child(5) {
    text-align: right;
    //background-color: red;
  }
  tr:nth-child(4) td:nth-child(3),
  tr:nth-child(4) td:nth-child(6) {
    text-align: left;
    //background-color: red;
  }

  .val {
    font-weight: bold;
    font-style: italic;
  }
}