JSFiddle - React, Tailwind, and code Playground

by helloworld

HTML

<div id="lotsOfDivs">
    <addingdivs></addingdivs>
</div>

CSS

body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
}

#header {
    background: #30BFB7;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
    height: 2vh;
    margin-bottom: 2vh
}

.big {
    background: #207F7A;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
    height: 20vh;
    margin-bottom: 2vh
}

.small {
    background: #10403D;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
    height: 2vh;
    padding-bottom: 2vh;
}

JavaScript

var gate = 0;

    Vue.component('addingdivs', {
        template: `
    <div>
        <div id="header">
            <button class="addDiv" type="button" @click="createDiv">ADD LOCATION</button>
            <button @click="inputFieldInfo = !inputFieldInfo">Toggle label</button>
        </div>
        <div class="parent" v-for="div in divs" :style=" div.height ? { 'height': div.height }: null">
            <div class="big" v-if="div.expanded" :key="'expanded' + div.id">

            <div class="switch">
                <input type="text" v-if="inputFieldInfo" placeholder="My Input">
                <label class="propertyLabel" v-else>My Label</label>

                <div class="firstChild">
                    <button class="done" @click="increaseLimit">INCREASE</button>
                </div>
                <div class="secondChild">
                    <button class="done" @click="expand(div)">EXPAND</button>
                </div>
            </div>
            </div>
            <div class="small" v-else :key="'collapsed' + div.id">
                <button class="done" @click="expand(div)">EXPAND</button>
            </div>
        </div>
    </div>
        `,
     data: function() {
            return {

                gate: gate,
                height: "",
                count: 0,
                locationsArr: ["one", "two", "three"],
                divs: [],
                inputFieldInfo: false
            }
        },

        methods: {
            expand: function(div) {
                if (div.expanded) {
                    div.expanded = false
                  this.height = ''
                } else {
                  div.expanded = true
                  this.height = '7vh'
                }
            },

            createDiv: function() {

                if (this.count <= gate) {   // Here you can decide how many divs that will be generated

                    // this.count++;
                    this.divs.push({
                     ...