textarea fully filling table-cell div

You MUST have vertical-align: top; otherwise as soon as you set textarea height: 100%; on the textarea it misaligns everything else.

by Andy Bulka

HTML

<div class="gjs-row" id="if9l">
  <div class="gjs-cell">
    <textarea name="out" title="this is the title of the textarea" id="iyll">this is the initial content of the textarea - hello    this is the initial content of the textarea - hello this is the initial content of the textarea - hello  this is the initial content of the textarea - hello this is the initial content of the textarea - hellothis is the initial content of the textarea - hello ABC ABVLKJLKJKLJ hello ABC ABVLKJLKJKLJ hello ABC ABVLKJLKJKLJ hello ABC ABVLKJLKJKLJ hello ABC ABVLKJLKJKLJ hello ABC ABVLKJLKJKLJ hello ABC ABVLKJLKJKLJ hello ABC ABVLKJLKJKLJ hello ABC ABVLKJLKJKLJ 
    </textarea>
  </div>
  
   
  <div class="gjs-cell">
    <div id="i1we">Insert your text hereInsert your text hereInsert your text hereInsert your text hereInsert your text hereInsert your text hereInsert your text hereInsert your text hereInsert your text hereInsert your text hereInsert your text hereInsert your text hereInsert your text hereInsert your text hereInsert your text hereInsert your text hereInsert your text hereInsert your text hereInsert your text hereInsert your text here
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.gjs-row {
  display: table;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  width: 100%;
}

.gjs-cell {
  width: 8%;
  display: table-cell;
  height: 75px;
}

#i1we {
  padding: 10px;
}

@media (max-width: 768px) {
  .gjs-cell {
    width: 100%;
    display: block;
  }
}


textarea {
/* box-sizing: border-box; */
width: 100%;
height: 100%;
vertical-align: top;
}