My form and table are currently positioned side by side in 2 columns:
https://i.sstatic.net/croh3.png
The layout of this form/table is built using datatable + materialize CSS.
I am looking to place the Form and table within a div to ensure that the bottom of both elements are always aligned.
Despite searching extensively, I have yet to find a suitable solution.
Below is the code snippet:
<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>