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/

Answer 2

You can use this code

body {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

.container {
  width: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.textarea {
  padding: 10px 15px;
  border: 1px solid #ced4da;
}

.textarea textarea {
  width: 100%;
  resize: none;
  border: none;
  padding: 0;
  outline: none;
  box-shadow: none;
  overflow: hidden;
  white-space: nowrap;
}

.form-group input {
  width: 100%;
  margin: 15px 0 0 0;
  padding: 10px 15px;
  outline: none;
  box-shadow: none;
  border: 1px solid #ced4da;
}

<div class='container'>
  <form>
    <div class="form-group textarea">
      <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Enter some textssssssssssssssssssssssssssssssssss" rows="3"></textarea>
    </div>
    <div class="form-group">
      <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Enter some textssssssssssssssssssssssssssssssssss">
    </div>
  </form>
</div>