My challenge is to create a responsive layout with a table and a side div, as shown in the image below. I attempted to use CSS float properties for the table and side div, but it did not provide the responsiveness I needed. I then tried implementing Bootstrap's grid system, but encountered difficulties. Additionally, I require scrollbars for both the table and side div.
You can find my code on StackBlitz.
.test{
overflow-y: auto !important;
height: 100% !important;
}<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<div class="ml-auto">
<input
class="form-control"
name="search"
[(ngModel)]="search"
type="search"
placeholder="Search"
/>
</div>
</nav>
<br /><br />
<section>
<div class="w-75 float-left overflow-auto test">
<table class="table table-hover">
<tr>
<th>Date</th>
<th>List Name</th>
<th>No. of Entities</th>
</tr>
<tbody>
<tr *ngFor="let items of data | filter: search">
<td>{{ items.date }}</td>
<td>{{ items.name }}</td>
<td>{{ items.entities }}</td>
<td>
<button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
Details
</button>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<br />
<aside>
<div class="w-20 float-right overflow-auto test">
<div class="alert alert-dark">+Add Description</div>
<p>{{s}}</p>
</div>
</aside>