Textarea not respecting padding when when white-space is set to nowrap

Question

I am trying to make a textarea element behave the same way an input element does. However, I am having issues with the padding. After setting the white-space property on the textarea to nowrap the padding on the right side is no longer being respected.

Here's a pic of what I mean:

CSS:

textarea {
  width: 100%;
  resize: none;
  padding: 10px 15px;
  overflow: hidden;
  white-space: nowrap;
}

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

Here's a link to a fiddle: https://jsfiddle.net/b384w0mn/

Any Ideas? Thanks in advance!

Answer 1

Perhaps a container would help?

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

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

* {
  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;
}

https://jsfiddle.net/kostasx/cjkq1g86/