Struggling to align two div elements side by side? One contains a two-column table and the other has a five-column table. Despite using Bootstrap's "row" class, you're unable to get them properly aligned. How can you achieve this layout without any issues? Hopefully, someone can lend a helping hand with this conundrum.
https://i.sstatic.net/WU8FY.png
Included below is the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>trial</title>
<!--Links for icons and images-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!--css for paginated-->
<link rel="stylesheet" href="http://localhost/Performance/css/usermange.css">
<style>
#displayproject{
margin-top:100px;
position:fixed;
background-color:blue;
}
</style>
</head>
<body>
<div class="container">
<div id="displayproject">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Projects</th>
</tr>
</thead>
<tbody>
<?php
include_once "../Connection/dbconnect.php";
$fetch_projects = mysqli_query($GLOBALS['db'],"select project_id,project_name from project_table limit 10;");
while($row = mysqli_fetch_array($fetch_projects)){
echo '<tr>
<td>
<span class="custom-checkbox">
<input type="checkbox" name="options[]" value="hello">
<label></label>
</span>
</td>';
echo '<td>'.$row['project_name'].'</td></tr><tr></tr>';
}
?>
</tbody>
</table>
</div>
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>Manage <b>Employees</b></h2>
</div>
<div class="col-sm-6">
<a href="#addEmployeeModal" class="btn btn-success" data-toggle="modal"><i class="material-icons"></i> <span>Add New Employee</span></a>
<a href="#deleteEmployeeModal" class="btn btn-danger" data-toggle="modal"><i class="material-icons"></i> <span>Delete</span></a>
</div>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>
<span class="custom-checkbox">
<input type="checkbox" id="selectAll">
<label for="selectAll"></label>
</span>
</th>
<th>Name</th>
<th>Email</th>
<th>Address</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="custom-checkbox">
<input type="checkbox" id="checkbox1" name="options[]" value="1">
<label for="checkbox1"></label>
</span>
</td>
<td>Thomas Hardy</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9bda1a6a4a8baa1a8bbadb089a4a8a0a5e7aaa6a4">[email protected]</a></td>
<td>89 Chiaroscuro Rd, Portland, USA</td>
<td>(171) 555-2222</td>
<td>
<a href="#editEmployeeModal" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit"></i></a>
<a href="#deleteEmployeeModal" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete"></i></a>
</td>
</tr>
<tr>
<td>
<span class="custom-checkbox">
<input type="checkbox" id="checkbox3" name="options[]" value="1">
<label for="checkbox3"></label>
</span>
</td>
<td>Maria Anders</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5a8a4b7aca4a4aba1a0b7b685a8a4aca9eba6aaa8">[email protected]</a></td>
<td>25, rue Lauriston, Paris, France</td>
<td>(503) 555-9931</td>
<td>
<a href="#editEmployeeModal" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit"></i></a>
<a href="#deleteEmployeeModal" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
The current output image I'm getting looks like this: