Placing two rows on the same line with bootstrap elements - html

Question

I would like to display two rows (tr) on the same line with equal width. I tried adding col-sm-6 to the tds, but it's the trs are getting displayed on two separate lines. Here's the html:
<div className="jumbotron col-sm-12 text-left row">
<div className="panel panel-info">
<div className="panel-heading">
HEADER
</div>
</div>
<table className="table table-bordered table-condensed table-responsive">
<tbody>
<tr>
<td className="col-sm-6 col-centered leftCol">
<div>
{"hello1"}
</div>
</td>
</tr>
<tr>
<td className="col-sm-6 col-centered rightCol">
<div>
{'hello2'}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 1

You will have to insert class col-sm-6 for tr tags if you want them on same line.
Here is the working fiddle of your code
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div className="jumbotron col-sm-12 text-left row">
<div className="panel panel-info">
<div className="panel-heading">
HEADER
</div>
</div>
<table className="table table-bordered table-condensed table-responsive">
<tbody>
<tr class="col-sm-6">
<td className="col-centered leftCol">
<div>
{"hello1"}
</div>
</td>
</tr>
<tr class="col-sm-6">
<td className="col-centered rightCol">
<div>
{'hello2'}
</div>
</td>
</tr>
</tbody>
</table>
</div>

Answer 2

<div className="jumbotron col-sm-12 text-left row">
<div className="panel panel-info">
<div className="panel-heading">
HEADER
</div>
</div>
<table className="table table-bordered table-condensed table-responsive">
<tbody>
<tr>
<td className="col-sm-6 col-centered leftCol" style="height: 200px;">
<div>
{"hello1"}
</div>
</td>
</tr>
<tr>
<td className="col-sm-6 col-centered rightCol" style="height: 200px;">
<div>
{'hello2'}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Adding style will do it.

Answer 3

<div className="jumbotron col-sm-12 text-left row">
<div className="panel panel-info">
<div className="panel-heading">
HEADER
</div>
</div>
<table className="table table-bordered table-condensed table-responsive">
<tbody>
<tr>
<td className="col-sm-6 col-centered leftCol">
<div>
{"hello1"}
</div>
</td>
<td className="col-sm-6 col-centered rightCol">
<div>
{'hello2'}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>