JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>

<html lang="en">

  <head>
    <meta charset="utf-8">

    <title>Airco rekentool</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">

    <!-- Compressed JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>

  </head>

  <body>

    <div id="rekentool">
      <div class="card" style="width: 500px;">
        <div class="card-divider" style="margin-bottom:1rem;">

          Afmetingen kamer
        </div>

        <div class="grid-x grid-padding-x">
          <div class="small-4 cell">
            <label for="middle-label" class="text-right middle">Lengte</label>
          </div>
          <div class="small-8 cell">
            <input type="number" id="middle-label" v-model="lt" placeholder="">
          </div>
          <div class="small-4 cell">
            <label for="middle-label" class="text-right middle">Breedte</label>
          </div>
          <div class="small-8 cell">
            <input type="number" id="middle-label" v-model="bt" placeholder="">
          </div>
          <div class="small-4 cell">
            <label for="middle-label" class="text-right middle">Hoogte</label>
          </div>
          <div class="small-8 cell">
            <input type="number" id="middle-label" v-model="ht" placeholder="">
          </div>
          <div class="small-4 cell">
            <label for="middle-label" class="text-right">Totaal</label>
          </div>
          <div class="small-8 cell" style="margin-bottom:1rem;">
            <b>{{ total }}m<sup>3</sup></b>
          </div>
        </div>
      </div>


      <div class="card"...

JavaScript

var rekentool = new Vue({
  el: '#rekentool',
  data: {
    lt: 4.5,
    bt: 3.5,
    ht: 1.5
  },
  computed: {
    total() {
      return parseFloat(this.lt * this.bt * this.ht, 2).toFixed(2)
    }
  }
})