Dashboard 2 layout different between playground and node red

trying (still) to make the transition to dashboard 2, found a vue playground and doing different layouts. That's when the world fell apart. I get one layout in the playground and a different one in node red using the same code copied and pasted between the two.
1

2

<template>
    <v-container>
        <v-col style="height: 150px; width: 300px; background-color: grey">
            <v-row style="height: 150px; width: 300px">
                <v-btn class="OneButton" stacked @click="Power_Off">
                    <v-icon class="iconBasic" ref="icon1">{{icon1}}</v-icon>
                </v-btn>
            </v-row>
        </v-col>

        <v-col style="height: 25px; width: 300px; background-color: grey">
            <v-row style="height: 25px; width: 300px">
                <v-btn class="a1" stacked @click="Power_Off">Test</v-btn>

                <v-btn class="a1" stacked @click="Power_Off">Next</v-btn>

                <v-btn class="a1" stacked @click="Power_Off">Text</v-btn>
            </v-row>
        </v-col>
        <v-col style="height: 110px; width: 300px; background-color: grey">
            <v-row style="height: 100px; width: 300px">
                <v-btn class="a2" stacked @click="Power_Off">
                    <v-icon class="iconBasic" ref="icon1">{{icon1}}</v-icon>
                </v-btn>

                <v-btn class="a2" stacked @click="Power_Off">
                    <v-icon class="iconBasic" ref="icon2">{{icon2}}</v-icon>
                </v-btn>

                <v-btn class="a2" stacked @click="Power_Off">
                    <v-icon class="iconBasic" ref="icon3">{{icon3}}</v-icon>
                </v-btn>
            </v-row>
        </v-col>
    </v-container>
</template>
<style>
    .OneButton {
        background-color: black;
        height: 80% !important;
        width: 90% !important;
        margin-top: 8px;
        margin-bottom: 8px;
        margin-left: 12px;
        margin-right: 12px;
        font-size: 60px;
        color: #d7dbdd;
    }

    .TwoButton {
        background-color: black;
        height: 85% !important;
        width: 75px !important;
        margin-top: 8px;
        margin-bottom: 8px;
        margin-left: 4px;
        margin-right: 4px;
        font-size: 60px;
        color: #d7dbdd;
    }

    .ThreeButton {
        background-color: black;
        height: 80% !important;
        width: 75px !important;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        font-size: 60px;
        color: #d7dbdd;
    }

    .a1 {
        background-color: black;
        height: 25px !important;
        width: 90px !important;
        margin-bottom: 1px;
        margin-left: 5px;
        margin-right: 5px;
        font-size: 16px;
        color: white;
        padding-bottom: 4px;
        border-bottom: 2px solid #dd7f00;
    }

    .a2 {
        background-color: black;
        height: 100% !important;
        width: 90px !important;
        margin-top: 4px;
        margin-bottom: 2px;
        margin-left: 5px;
        margin-right: 5px;
        font-size: 60px;
        color: #d7dbdd;
    }

    .iconBasic {
        font-size: 45px;
    }

    .container {
        display: flex;
        width: 100%;
        height: 100%;
        background-color: #303030;
    }

    .centerme {
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        margin: 4px;
    }

    .roundme {
        border: 2px solid black;
        border-radius: 8px;
        background-color: #222222;
        box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, 0.1);
        background: rgb(5, 5, 5);
        background: linear-gradient(135deg,
                rgba(5, 5, 5, 1) 0%,
                rgba(42, 42, 42, 1) 100%);
        margin: 3px;
    }

    .roundme2 {
        border: 2px solid black;
        border-radius: 8px;
        background-color: #222222;
        box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, 0.1);
        background: rgb(5, 5, 5);
        margin: 3px;
    }

    .blank {
        border: #303030;
        border-radius: 8px;
        background-color: #303030;
        box-shadow: inset 2px 2px 3px 4px #303030;
        background: #303030;
        background: linear-gradient(135deg, #303030 0%, #303030);
        margin: 3px;
    }

    .b1 {
        color: #6689a1;
        height: 25px;
        margin-bottom: 1px;
        font-size: 16px;
        padding-bottom: 4px;
        border-bottom: 2px solid #dd7f00;
    }

    .b2 {
        height: 100%;
        margin-top: 1px;
        font-size: 28px;
        color: #d7dbdd;
    }

    .gradient-2 {
        background: linear-gradient(135deg,
                rgba(5, 5, 5, 1) 0%,
                rgba(42, 42, 42, 1) 100%) padding-box,
            linear-gradient(to right, #f16f0f, #f43700) border-box;
        margin-top: 14px;
        border-radius: 20px;
        border: 6px solid transparent;
    }

    .red_color {
        color: #ff0000;
    }

    .grey_color {
        color: #444444;
    }

    .green_color {
        color: #008000;
    }

    .blue_color {
        color: #00daf4;
    }

    .otstatus {
        padding-left: 6px;
        padding-top: 2px;
        font-size: 14px;
    }

    @keyframes fire {
        from {
            color: #ff5b33;
        }

        50% {
            color: #ffac33;
        }

        to {
            color: #ff5b33;
        }
    }

    .on_fire {
        animation-name: fire;
        animation-duration: 2000ms;
        animation-iteration-count: infinite;
    }

    @keyframes water {
        from {
            color: #add8e6;
        }

        50% {
            color: #0000cd;
        }

        to {
            color: #add8e6;
        }
    }

    .on_water {
        animation-name: water;
        animation-duration: 2000ms;
        animation-iteration-count: infinite;
    }
</style>
<script>
    export default {
    data() {
      return {
        value: 'OFF',
        icon1: 'mdi-bed',
        icon2: 'mdi-cog',
        icon3: 'mdi-album',
      }
    },

    watch: {
      msg: {
        deep: true,
        handler(newVal) {
          if (newVal.payload === 'start') {
            this.Power_On()
          }
          if (newVal.payload === 'stop') {
            this.Power_Off()
          }
          if (newVal.payload === 'next') {
            this.Power_Next()
          }
        },
      },
    },

    methods: {
      Power_Off: function () {
        this.icon1 = 'mdi-cog'
        this.$refs.icon1.$el.style.color = 'green'
        this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.$refs.icon2.$el.style.color = 'grey'
        this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.$refs.icon3.$el.style.color = 'grey'
        this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.send({ topic: 'Power', payload: 'Off' })
      },

      Power_On: function () {
        this.icon1 = 'mdi-bed'
        this.$refs.icon1.$el.style.color = 'grey'
        this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.$refs.icon2.$el.style.color = 'green'
        this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.$refs.icon3.$el.style.color = 'grey'
        this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.send({ topic: 'Power', payload: 'On' })
      },

      Power_Next: function () {
        this.$refs.icon1.$el.style.color = 'grey'
        this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.$refs.icon2.$el.style.color = 'grey'
        this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.$refs.icon3.$el.style.color = 'green'
        this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608'
        this.send({ topic: 'Power', payload: 'Next' })
      },
    },
  }
</script>

is there any logical explanation or is the universe just stacked against me?
Thanks
[edit] top is the playground image, bottom is the node red image
[edit 2] url of playground https://play.vuetifyjs.com/

Well, apparently in NodeRed there is a css class .v-btn--stacked.v-btn--size-default that is forcing the --v-btn-height=72px, if unsing the inspect we change that to 25px it seems ok.

I do not understand css very well, but adding that directive --v-btn-height: 25px !important; to the a1 style class seems to solve. Most likelly will have other consequences.

Two things, first adding that does indeed fix the page. Second I changed from btn to card which also fixes it. I really didn't need that to be a btn that was left over from 10,000 attempts before.
Thanks, and I will hang on to your suggestion for future possibilities. You pointing that out helped a lot.