Input and symbol on the same line height next to each other in table cell?

Question

I have table with td cell and inside of the cells are input element and symbol. They should be next to each other and on the same height as in the td cell with text description. Here is example of what I have:

.tbl {
  width: 600px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table class="tbl">
  <thead>
    <tr>
      <th colspan="2">Data Validation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
   <td colspan="2">Form validation text description. Form validation text description. Form validation text description. Form validation text description.</td>
  </tr>
    <tr id="tr_dc1">
      <td>
        <span><input type="checkbox" name="check1" id="check1"></span>
        <span><i class="material-icons" style="color:##ffc107">warning</i></span>
      </td>
      <td>Description text for testing. Description text for testing. Description text for testing. Description text for testing. Description text for testing.</td>
    </tr>
  </tbody>
</table>

As you can see in example the checkbox and symbol are on different lines. They should be next to each other on the same height. Also this solution should be compatible in all browsers (IE 9 >, Firefox, Chrome, Safari). If anyone knows good way to fix this please let me know.