Bootstrap tables not in columns when width of one table is large - html

Question

I have two tables that are meant to be shown side by side.
When the width of the first table is large (but still small enough to fit both side by side) the second table is shown below it.
Is there a way to show them side by side and only drop down if the screen width is too small?
Here is my code:
<div class="container">
<div class="row">
<div class="col-sm">
<h3>Students</h3>
<div class="row">
New
</div>
<table>
<tr>
<td>Username</td>
<td>First name</td>
<td>Surname</td>
</tr>
<tr>
<td>lilyliam</td>
<td>Lily</td>
<td>Liam</td>
</tr>
<tr>
<td>gracenoah</td>
<td>Grace</td>
<td>Noah</td>
</tr>
<tr>
<td>avawilliam</td>
<td>Ava</td>
<td>William</td>
</tr>
<tr>
<td>avawilliam</td>
<td>Ava</td>
<td>Williamsssssssssssssssssss</td>
</tr>
</table>
</div>
<div class="col-sm">
<h3>Teachers</h3>
<div class="row">
New
</div>
<table>
<tr>
<td>Username</td>
<td>First name</td>
<td>Surname</td>
<td>Type</td>
</tr>
<tr>
<td>johnsmith</td>
<td>John</td>
<td>Smith</td>
<td>ADMIN</td>
</tr>
<tr>
<td>williamjoseph</td>
<td>William</td>
<td>Joseph</td>
<td>teacher</td>
</tr>
<tr>
<td>franksmith</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;
}
All other css comes from bootstrap
Thanks

Answer 1

I am assuming that you are using the official bundle of css provided by Bootstrap. To align table's side by side you can do something like:
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Table 1</h1>
// Table 1 Here
</div>
<div class="col-md-6">
<h1>Table 2</h1>
// Table 2 Here
</div>
</div>
</div>
Hope this works for you.