I am having trouble arranging the chart table and data table in my HTML code. The chart is displayed above the table, making it difficult to see the full table clearly. How can I rearrange the elements to ensure both are visible properly?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=2">
<title> BATTERY VOLTAGE</title>
</head>
<body>
<div class="container-fluid">
<h1 class="mt-2 mb-3 text-center text-primary">BATTERY VOLTAGE</h1>
<div class="card">
<div class="card-header">
<div class="row">
<div class="col col-sm-9">Battery Voltage</div>
<div class="col col-sm-3">
<input type="text" id="daterange_textbox" class="form-control" readonly />
</div>
</div>
</div>
<div class="column">
<div class="card-body">
<div class="table-responsive" >
<div class="chart-container pie-chart" "width:60%" >
<div border="1"
align="left" >
<canvas id="bar_chart" height="90"> </canvas>
</div>
</div>
<table class="column">
<table class="table table-striped table-bordered" id="order_table" style="width:40%" align="right">
<thead>
<tr>
<th width="5%">Order Number</th>
<th width="6%">Order Value</th>
<th width="6%">Order Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>