Is there a way to ensure that my buttons inside divs stay on the same line, even when the window is resized to be smaller? I set the table width to 20% as an example, but the buttons are still on separate lines. Should I add a min-width to the table so the row stays within it?
Desired layout:
https://i.sstatic.net/Y9M7G.png
Current layout:
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
rel="stylesheet"
/>
<table style="width:20%;">
<tr>
<td id="123">
<div class='row ml-1'>
<div class='col-xs-6 mr-1 mb-3'>
<button onclick='toggleHideShowTC(this.id)' id='33' title='Passed' class='btn btn-success rounded text-light font-weight-bold h6 p-1 d-inline-block'>
2331 ✓
</button>
</div>
<div class='col-xs-6 mr-1 mb-3'>
<button onclick='toggleHideShowTC(this.id)' id='33' title='Passed' class='btn btn-success rounded text-light font-weight-bold h6 p-1 d-inline-block'>
2331 ✓
</button>
</div>
<div class='col-xs-6 mr-1 mb-3'>
<button onclick='toggleHideShowTC(this.id)' id='33' title='Passed' class='btn btn-success rounded text-light font-weight-bold h6 p-1 d-inline-block'>
2331 ✓
</button>
</div>
<div class='col-xs-6 mr-1 mb-3'>
<button onclick='toggleHideShowTC(this.id)' id='33' title='Passed' class='btn btn-success rounded text-light font-weight-bold h6 p-1 d-inline-block'>
2331 ✓
</button>
</div>
<div class='col-xs-6 mr-1 mb-3'>
<button onclick='toggleHideShowTC(this.id)' id='33' title='Passed' class='btn btn-success rounded text-light font-weight-bold h6 p-1 d-inline-block'>
2331 ✓
</button>
</div>
</div>
</td>
</tr>
</table>