I am facing an issue with displaying two tables side by side. Whenever the width of the first table is too large, the second table is pushed below it. https://i.sstatic.net/w8zwp.png
https://i.sstatic.net/SZdZU.png
Is there a way to make them stay side by side and only shift below each other when the screen width is insufficient?
Here is the code I am currently using:
<div class="container">
<div class="row">
<div class="col-sm">
<h3>Students</h3>
<div class="row">
<a href="/newstudent" class="button-sm">New</a>
</div>
<table>
<tr>
<td>Username</td>
<td>First name</td>
<td>Surname</td>
</tr>
<tr>
<td><a href="/editstudent/lilyliam">lilyliam</a></td>
<td>Lily</td>
<td>Liam</td>
</tr>
<tr>
<td><a href="/editstudent/gracenoah">gracenoah</a></td>
<td>Grace</td>
<td>Noah</td>
</tr>
<tr>
<td><a href="/editstudent/avawilliam">avawilliam</a></td>
<td>Ava</td>
<td>William</td>
</tr>
<tr>
<td><a href="/editstudent/avawilliam">avawilliam</a></td>
<td>Ava</td>
<td>Williamsssssssssssssssssss</td>
</tr>
</table>
</div>
<div class="col-sm">
<h3>Teachers</h3>
<div class="row">
<a href="/newteacher" class="button-sm">New</a>
</div>
<table>
<tr>
<td>Username</td>
<td>First name</td>
<td>Surname</td>
<td>Type</td>
</tr>
<tr>
<td><a href="/editteacher/johnsmith">johnsmith</a></td>
<td>John</td>
<td>Smith</td>
<td>ADMIN</td>
</tr>
<tr>
<td><a href="/editteacher/williamjoseph">williamjoseph</a></td>
<td>William</td>
<td>Joseph</td>
<td>teacher</td>
</tr>
<tr>
<td><a href="/editteacher/franksmith">franksmith</a></td>
<td>Frank</td>
<td>Smith</td>
<td>teacher</td>
</tr>
</table>
</div>
</div>
</div>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
I am currently using bootstrap for all other CSS styles. Thank you!