How to format textarea in HTML in a way to not 'move' other elements?

Issue

I'm quite new to HTML and I'm developing a platform using Apps Script, this platform is used to analyse certain attributes of some users, accessed through a window which contains all info regarding that user, imported via Google Sheets that I use as a database.

The thing is, I have this 'description' like area that can be quite long regarding character number, so I'm using it like a textarea, since it can be used to break lines, but as I increase its width other 'blank' areas over it are increased as well, is there a way that I can make it like an independent area? I mean, to not alter other elements attributes?

Here is the code:

<tr>
  <td class="modal-table-label" style="width:100px"><label for="description" style="width:100px">Desc. Regra</label></td>
</tr>
<tr>
  <td>
    <div>
      <textarea name="description" id="description_form" value="" class="info-input-sm" style="width:350px;" rows="5" cols="500" > </textarea>
    </div>
  </td>
</tr>

And here is an image showing my problem:

Solution

You can set a table cell to span multiple columns using the colspan attribute.

body, textarea {
  font-family: sans-serif;
  font-size: 16px;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid blue;
  padding: 5px;
}

textarea {
  width: 100%;
  border: 1px solid green;
  padding: 5px;
  box-sizing: border-box;
}

<table>
  <tr>
    <td>Apple Pie</td>
    <td>Banana Smoothie</td>
  </tr>
  <tr>
    <td>Cherry Slice</td>
    <td>Sticky Date Pudding</td>
  </tr>
  <tr>
    <td colspan="2">
      <textarea rows="5"></textarea>
    </td>
  </tr>
</table>

Answered By - Brett Donald