I have 2 elements in a div side by side, will hiding one make the other expand to fill the space of the div they're in?

The app has 3 rows of 2 tables each [in the code snippet there's just one row] and I'm trying to create events that:

1. Header is clicked
2. The other table in the row becomes hidden
3. The table with the clicked header expands to fill the div space

Is this possible?

I've tried using Bootstrap expand and collapse but that doesn't really fulfill what I want the code to do.

<div class="row">
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-header bg-dark text-white">
                                        Post Change
                                    </div>
                                    <div class="card-body" style="height: calc(100vh - 400px); overflow-y: auto;">
                                        <div class="col-12">
                                            <table class="table table-hover" id="table" data-toggle="table" data-filter-control="true" data-id-field="id" data-height="650" data-pagination="true" data-page-list="[10,25]" data-sort-name="memui" data-sort-order="asc">
                                                <thead>
                                                    <tr>
                                                        [TABLE GOES HERE]
                                                    </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="card">
                                    <div class="card-header bg-dark text-white">
                                        New Members
                                    </div>
                                    <div class="card-body" style="height: calc(100vh - 400px); overflow-y: auto;">
                                        <div class="col-12">
                                            <table class="table table-hover" id="table" data-toggle="table" data-filter-control="true" data-id-field="id" data-height="650" data-pagination="true" data-page-list="[10,25,50,100,250,500]" data-sort-name="memui" data-sort-order="asc">
                                                <thead>
                                                    <tr>
                                                     [TABLE GOES HERE]
                                                    </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

I am expecting the clicked table to expand to fill the space the other hidden table takes up when it becomes hidden.