JSFiddle - React, Tailwind, and code Playground

by Kostas X

HTML

<div class='container'>
  <div class="textarea-wrapper">
  <textarea placeholder='Enter some textssssssssssssssssssssssssssssssssss' rows='1'></textarea>
  </div>

<input type='text' placeholder='Enter some textssssssssssssssssssssssssssssssssss'>
</div>

CSS

* {
  box-sizing: border-box;
}


.container {
  width: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.textarea-wrapper {
  padding: 10px 15px;
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
  resize: none;
  overflow: hidden;
  white-space: nowrap;
  border:none;
}

input {
  width: 100%;
  padding: 10px 15px;
}