Как плавно изменить ширину и высоту блока?

Question

[Дамир Шаниязов]

Есть вот такая структура

<div class="container-fluid">
    @foreach($sptips as $key => $sptip)
        <div class="container-fluid">
            <div class="sptip">{{$sptip}}</div>
            <div class="row">
                @foreach($rows as $row)
                    @if($key == $row['sptip'])
                        <div class="card shadow rounded" data-parent="{{$row['id']}}" data-showed="false">
                            <div class="card-header">
                                <div>{{$row['shortname']}}</div>
                                <div class="children" title="Раскрыть\Скрыть" data-downloaded="false">
                                    @if($row['amount_children'] > 0)
                                        <i class="fa fa-chevron-down" aria-hidden="true"></i>
                                    @endif
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="card-title">{{$row['name']}}</div>
                                <div class="card-text"></div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    @endforeach
</div>

.card {
            width: 140px;
            height: 100%;
            margin: .25rem;
            border: none;
            transition: 1s;
        }
        .card-text {
            height: 0;
            overflow: hidden;
            transition: 1s;
        }

При клике по card загружается эта же структура. Задача похожа на создание дерева.

Как сделать, чтобы при клике по карточке высота .card-text пропорционально изменялась с шириной .card.
На данный момент при изменении высоты на 100% и на 0 card-text схлопывается, а не плавно открывается\закрывается