Table spanning too many cols?

Question

Here is the fiddle: http://jsfiddle.net/wf7j5tn8/

How can I make the text area not change the height of my left tag? I still want the text field to be that height however, I want to add more rows to the left side of my table. I want to keep it one table.

    <tr>
      <th>* Lib Refs</th>
      <th class="th_background">
        <input type="text" id="librefs" name="librefs" style="width: 100%" class="form-control" placeholder="Enter Librefs">
      </th>
      <th colspan="2" style="background-color: #0072bc;">
         <textarea rows="23" style="width: 100% !important;" id="query" placeholder="Enter query" name="query" required></textarea>
      </th>
    </tr>

Answer 1

Use rowspan for spanning rows instead of colspan.