Drag an element to another div and auto arrange so both div are balanced

I am trying to implement this on my web application, base on my research there is “vue-draggable” which will allow dragging from one div to another(upper and lower div). But I am trying to implement dragging with auto arranging so the two divs are balanced like the image below.

com-resize
note: this app is an ios app ( I think the dragging and dropping is implemented with UICollectionView)

this is what my upper and lower div looks like

       <div class="wrapper">
          <div class="first_row">
            <template v-for="remocon in firstRow.models">
              <div
                @click="openDialog(remocon, $event)"
                class="sh-card_off"
                v-bind:key="remocon.id + '_sh-card_off'"
              >
                <div class="card-top" v-bind:key="remocon.id + '_card-top'">
                  <div class="card-left" v-bind:key="remocon.id + '_card-left'">
                    <component
                      v-bind:is="remocon.appProductIcon"
                      width="30px"
                      alt="SPOT"
                      v-bind:key="remocon.id + '_appProductIcon'"
                    ></component>
                  </div>
                  <div
                    v-if="!remocon.has_battery"
                    class="card-right_off"
                    v-bind:key="remocon.id + '_card-right_off'"
                  >
                    <br />
                    {{ remocon.battery }}
                  </div>
                  <div
                    v-if="remocon.has_battery"
                    class="card-right-gray"
                    v-bind:key="remocon.id + '_card-right-gray'"
                  >
                    <battery100 v-bind:key="remocon.id + '_battery'" />
                  </div>
                </div>
                <div
                  class="card-bottom"
                  v-bind:key="remocon.id + '_card-bottom'"
                >
                  {{ remocon.label }}
                </div>
              </div>
              <div class="mr10" v-bind:key="remocon.id + '_mr10'"></div>
            </template>
            <div class="pr30"></div>
          </div>

          <div class="second_row">
            <template v-for="remocon in secondRow.models">
              <div
                class="sh-card_on"
                @click="openDialog(remocon, $event)"
                v-bind:key="remocon.id + '_sh-card_on'"
              >
                <div class="card-top" v-bind:key="remocon.id + '_card-top'">
                  <div class="card-left" v-bind:key="remocon.id + '_card-left'">
                    <component
                      v-bind:is="remocon.appProductIcon"
                      width="30px"
                      alt="SPOT"
                      v-bind:key="remocon.id + '_appProductIcon'"
                    ></component>
                  </div>
                  <div
                    class="card-right_on"
                    v-bind:key="remocon.id + '_card-right_on'"
                  >
                    ON
                  </div>
                </div>
                <div
                  class="card-bottom"
                  v-bind:key="remocon.id + '_card-bottom'"
                >
                  {{ remocon.label }}
                </div>
              </div>
              <div class="mr10" v-bind:key="remocon.id + '_mr10'"></div>
            </template>
            <div class="pr30"></div>
          </div>
        </div>
      </div>

I am actually on the verge of giving up and accepting the limitations of my skill and the available tools for web development. But I really want to make this work so I am here shamelessly asking for help.