JSFiddle - React, Tailwind, and code Playground

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: 20px;
  margin-bottom: 2vh
}

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

.small {
  background: #10403D;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  height: 60px;
  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>
        </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="div.inputFieldInfo" v-model="div.locationName" placeholder="Location Name">
                <label class="propertyLabel" v-else>{{div.locationName}}</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
            if (div.locationName) {
              div.inputFieldInfo = 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({
              id: this.count,
              expanded: true,
              height: '',
           ...