Как реализовать одну линию в сетке, чтобы она была больше другой и не занимала места

Question

Как я могу реализовать одну линию в сетке, чтобы она была больше другой и не занимала никаких мест

Как я могу исправить систему сетки, чтобы одна линия была больше, чем другая, при любых условиях, а другие линии не не принимайте его высоту, как на картинке, синий цвет исчезнет

HTML

<div [class.eggCard]="proteinKeyValue.key=='egg'" class="card">
    <div *ngIf="proteinKeyValue.key!=='egg'" class="m-0" style="width:100%">
        <div class="row justify-content-center m-0">
            <div class="col-5 col-sm-4 box p-1">
                {{proteinKeyValue.key}}
            </div>
            <div class="col-1"></div>
            <div class="col-5 col-sm-4 box p-1">
                {{proteinKeyValue.value}}
            </div>
            <div [class.d-none]="!editToggle">
                <input type="text" [id]="proteinKeyValue.key+i" (keyup)="proteinKeyValue.value"
                    [value]="proteinKeyValue.value"
                    class="text-center rounded-pill border border-white inputEdit">
            </div>
        </div>
    </div>
    <div *ngIf="proteinKeyValue.key==='egg'">
        <div class="row justify-content-center m-0">
            <label class="col smallBox p-0 m-0">{{proteinKeyValue.key}}</label>
        </div>
        <div class="row justify-content-center m-0">
            <div class="col-5 col-sm-4 box p-0">
                <small>amount</small>
            </div>
            <div class="col-1"></div>
            <div class="col-5 col-sm-4 box p-0">
                <small>{{proteinKeyValue.value.amount}}</small>
            </div>
        </div>
        <div class="row justify-content-center m-0">
            <div class="col-5 col-sm-4 box p-0">
                <small>sizeEgg</small>
            </div>
            <div class="col-1"></div>
            <div class="col-5 col-sm-4 box p-0">
                <small>{{proteinKeyValue.value.sizeEgg}}</small>
            </div>
        </div>
    </div>
</div>

CSS и Bootstrap

.card {
    height: 80px;
    justify-content: center;
}

.eggCard {
    height: 176px;
}

.box {
    text-transform: capitalize;
    border: 1px solid rgb(194, 193, 193);
    box-shadow: 0 0 2px 2px rgb(185, 235, 250);
}

.smallBox {
    text-transform: capitalize;
    border: 1px solid rgb(238, 193, 193);
    box-shadow: 0 0 2px 2px rgb(243, 203, 195);
    z-index: 1;
}

[