How to smoothly change the width and height of a block?

Question

css

There is such a structure

<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;
        }

When a card is clicked, the same structure is loaded. The task is similar to creating a tree.

How can I make the height of .card-text proportionally change with the width of .card when the card is clicked .
At the moment, when changing the height to 100% and to 0, card-text collapses, and does not smoothly open / close