JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">
 Resize 
</button>
<br/>
	<table>
		<tbody>
			<tr>
				<th>Column 1</th>
				<th>Column 2</th>
			</tr>
			<tr>
				<td>
          <div class="container fixed-min">
            <textarea class="textAreaElem"> This contents of this column should always be visible i.e. no scroll bar, and instead the height of this row should adjust to show all content.
            </textarea> 
          </div>
        </td>
				<td>
          <div class="container">
            <div class="text-area" contenteditable="true">This contents of this column should always be visible i.e. no scroll bar, and instead the height of this row should adjust to show all content.
            </div>
          </div>
        </td>
			</tr>
		</tbody>
	</table>
</body>
</html>

CSS

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid black;
}

th, td {
  text-align: center;
  border: 1px solid black;
  padding: 10px;
}

.container {
  border: 1px solid blue;
}

.text-area {
  width: 100%;
  box-sizing: border-box;
  display: flex;
min-height:50px;
height:auto;
border:2px solid rgba(63,63,63,1);
}

.fixed-min {
  min-width: 600px;
}

JavaScript

$(document).ready(function() {
   $('textarea').each(function() {
     $(this).height($(this).prop('scrollHeight'));
   });
 });