Having an issue with aligning two grids created in HTML using Bootstrap. Below is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>IRIS Flower Classification</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e0fae2fae5">[email protected]</a>/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ee4fffbebfcf7cebda0bba0bf">[email protected]</a>/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e6e716e6e7b6c30746d5e2f302f28302f">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4d6dbdbc0c7c0c6d5c4f4809a829a85">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h2 class="heading">
IRIS Flower Classification
</h2>
<div class="container-fluid">
<div class="row">
<div class="col1">
<form action="{{url_for('predict') }}" method=post>
<label type="text" for="Sepal_length">Sepal length:</label>
<input type="number" id="sepal_length" name="sepal_length" step=".1" value=""><br>
<label type="text" for="Sepal width">Sepal width:</label>
<input type="number" id="sepal width" name="sepal width" step=".1" value=""><br>
<label type="text" for="Petal length">Petal length:</label>
<input type="number" id="Petal length" name="petal length" step=".1" value=""><br>
<label type="text" for="Petal width">Petal width:</label>
<input type="number" id="Petal width" name="Petal width" step=".1" value=""><br>
<input type="submit" value="Predict">
</form>
</div>
<div class="col2">
<h2 class="testdata">
Sample test data
</h2>
<table class="table">
<tr>
<th>Species</th>
<th>Sepal length</th>
<th>Sepal width</th>
<th>Petal length</th>
<th>Petal width</th>
</tr>
<tr>
<td>Setosa</td>
<td>5.4</td>
<td>3.9</td>
<td>1.7</td>
<td>0.4</td>
</tr>
<tr>
<td>Versicolor</td>
<td>6.2</td>
<td>2.2</td>
<td>4.5</td>
<td>1.5</td>
</tr>
<tr>
<td>Virginica</td>
<td>5.7</td>
<td>2.5</td>
<td>5</td>
<td>2</td>
</tr>
</table>
</div>
</div>
</div>
<br>
<div class="output">
<img height="241px" width="203px" src="/static/img/{{ prediction_answer }}.png" alt="No Prediction">
</div>
</body>
</html>Experiencing difficulty with aligning columns properly. Also seeking methods to create a column of a specified pixel size in HTML and how to remove flex.