v-за неправильное выравнивание контента?

Question

Я выполняю этот бит кода vue, который должен зацикливаться и генерировать <img> с тегами <p>, где тег <p> выровнен под каждым изображением.

Каждое изображение затем выравнивается, чтобы заполнить сетку сверху, как показано на рисунке ниже: Мой текущий код:

<div v-for="(category, index) in ingredients">
    <div class="row full-padding">
        <div class="col-lg-6 text-left">{{index}}</div>
        <div v-bind:id="index + 'BUTTON'" class="col-lg-6 hoverable text-right" v-on:click="toggleShow(index)">[-]</div>
    </div>
    <div class="row full-padding" v-bind:id="index">
        <span v-if="!ingredient[2] && !ingredient[1]" v-for="(ingredient, ingdex) in category">
            <img class="ing-img hoverable" v-bind:src="ingredient[3]" v-on:click="toggleIngredient(ingredient)" v-bind:name="ingredient[0]" width="20%"/>
        </span>
    </div>
</div>

однако, когдаЯ изменил код, добавив <p>{{ingredient[0]}}</p>, чтобы отображать название каждого ингредиента под изображением, все элементы не совпадают!Как я могу это исправить и почему это происходит?

Что происходит:

Нерабочий код:

<div v-for="(category, index) in ingredients">
    <div class="row full-padding">
        <div class="col-lg-6 text-left">{{index}}</div>
        <div v-bind:id="index + 'BUTTON'" class="col-lg-6 hoverable text-right" v-on:click="toggleShow(index)">[-]</div>
    </div>
    <div class="row full-padding" v-bind:id="index">
        <span v-if="!ingredient[2] && !ingredient[1]" v-for="(ingredient, ingdex) in category">
            <img class="ing-img hoverable" v-bind:src="ingredient[3]" v-on:click="toggleIngredient(ingredient)" v-bind:name="ingredient[0]" width="20%"/>
            <!-- This is the changed bit here -->
            <p>{{ingredient[0]}}</p>
        </span>
    </div>
</div>

CSS:

.hoverable:hover {
    cursor: pointer;
}

.ing-img {
    margin-right: 5%;
    margin-bottom: 5%;
    border: 3px solid #ddd;
    border-radius: 4px;
}

.rec-img {
    margin-right: 5%;
    margin-bottom: 5%;
    border: 3px solid #ddd;
    border-radius: 4px;
}

.full-padding {
    padding: 10px 10px 10px 10px;
}

.customBorder {
    border: 3px solid #ddd;
    border-radius: 4px;
    border-color: #FF4136;
}

#header {
    margin-bottom: 5%;
}

.ing-div {
    display: inline-block;
}