Q:

Position fixed element at bottom of parent div with same parent width

How can I position a textarea at the bottom of the parent div and also make the textarea the same width?
The problem I have now is that the textarea expands all the way to the right side of the page.
Html

html,
body {
  height: 90%;
}

.container {
  position: relative;
  margin-left: 100px;
  width: 500px;
  height: 100%;
  border: 1px solid red;
}

.middle {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100%;
  height: 100%;
  border: 1px solid blue;
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}
<div class="container">
  <div class="middle">
    <p>
      Textarea should be placed at bottom of the 'blue' div, with the same width
    </p>
    <textarea class="bottom" placeholder="Textarea..."></textarea>
  </div>
</div>

Here is a simple example of the problem that I have: https://jsfiddle.net/hu45v46p/1/
How can this be solved with html and css?

A:

Instead of position: fixed, you want to give it position: absolute.
By default, it will be slightly larger than the blue box (because of the borders). You can accommodate for this with width: calc(100% - 6px):

html,body {
  height: 90%;
}
.container {
  position: relative;
  margin-left: 100px;
  width: 500px;
  height: 100%;
  border: 1px solid red;
}
.middle {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100%;
  height: 100%;
  border: 1px solid blue;
}
.bottom {
  position: absolute;
  bottom: 0;
  width: calc(100% - 6px);
}
<div class="container">
  <div class="middle">
    <p>
      Textarea should be placed at bottom of the 'blue' div, with the same width
    </p>
    <textarea class="bottom" placeholder="Textarea..."></textarea>
  </div>
</div>

Hope this helps! :)

