Align 2 cards in DIV vertically materialize CSS - css

Question

I have the following form and table that are side by side in 2 columns as shown here:
This form/table is based on datatable + materialize CSS.
I would like to have the Form and table in a div an make sure that bottom of table and form are always aligned.
I searched around without any solution.
Here goes my code:
<div class="divider"></div>
<!--Basic Form-->
<div id="basic-form" class="section">
<div class="row">
<div class="col s12 m4 l4">
<div class="card-panel">
<h4 class="header2">Add or Modify</h4>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s2">
<input type="number" id="id" name="id" class="form-control" placeholder="Id" />
<label for="id">Id</label>
</div>
<div class="input-field col s10">
<?php
//// function populate ($sql, $class,$name, $id, $title, $value,$option)
echo populate ("SELECT * FROM product_family order by product_type_id ASC","form-control","nm","nm","Select Product", "product_family", "product_family");?>
<label for="nm">Product</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input type="number" step=".01" placeholder="0.00" id="em" name="em" class="form-control" />
<label for="em">Win</label>
</div>
<div class="input-field col s6">
<input type="number" step=".01" id="hp" name="hp" class="form-control" placeholder="0.00"/>
<label for="message">Drop</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<?php
//// function populate ($sql, $class,$name, $id, $title, $value,$option)
echo populate ("SELECT * FROM currency order by id ASC","form-control","ad","ad","Select Currency", "currency", "currency");?>
<label for="ad">Currency</label>
</div>
<div class="row">
<div class="input-field col s12">
<button type="button" id="save" class="btn btn-primary" onclick="saveData()">Save</button>
<button type="button" id="update" class="btn btn-warning" onclick="updateData()">Update</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Form with placeholder -->
<div class="col s12 m8 l8">
<div class="card-panel">
<h4 class="header2">Products In DB</h4>
<div class="row">
<table id="table1" class="table table-bordered table-striped table-hover display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th width="20">ID</th>
<th>Product</th>
<th>Win</th>
<th>Drop</th>
<th width="100">Currency</th>
<th width="100">Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Add the css code which will help to solve the issue::
.section .row {
display: flex;
display: -webkit-flex;
display: -moz-flex;
word-break: break-word;
}
.section .card-panel {
height: 100%;
}