JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>Molecule</th>
      <th>Rank</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="cell"><span>CO<sub>2</sub></span></td>
      <td>
        <select class="form-control">
          <option>23</option>
          <option>24</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="cell"><span>SO<sub>4</sub></span></td>
      <td>
        <select class="form-control">
          <option>23</option>
          <option>24</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

CSS

.table > tbody > tr > td.cell {
  vertical-align: middle;
}