Position absolute for variable rotated text - html

Question

I have a banner caption with vertical text which I've lined up using position: absolute;. However this text is user defined, so as the text changes, the alignment changes. How do I go about positioning this so it stays in the bottom left corner no matter the text?
.banner__wrap {
background-color: grey;
margin: 0 auto;
max-width: 1180px;
padding: 0 20px;
height: 100vh;
position: relative;
}
.banner__caption {
bottom: 150px;
background-color: red;
left: -50px;
max-width: 270px;
position: absolute;
transform: rotate(-90deg);
}
h2 {
margin: 0;
}
h4 {
margin: 10px 0 0;
}
<div class="banner__wrap">
<a class="banner__caption" href="www.google.com">
<h2>this is my heading</h2>
<h4>this is my cool subheading with a bunch of text</h4>
</a>
</div>

Answer 1

Adjust transform-origin and add a translation like this:
body {
margin:0;
}
.banner__wrap {
background-color: grey;
margin: 0 auto;
max-width: 1180px;
padding: 0 20px;
height: 100vh;
position: relative;
}
.banner__caption {
background-color: red;
max-width: 270px;
position: absolute;
bottom:0;
transform: rotate(-90deg) translateY(100%);
transform-origin: bottom left;
}
h2 {
margin: 0;
}
h4 {
margin: 10px 0 0;
}
<div class="banner__wrap">
<a class="banner__caption" href="www.google.com">
<h2>this heading</h2>
<h4>this is subheading</h4>
</a>
</div>

Answer 2

The problem is the left: -50px; in banner__caption class. I didn't understand why did you use minus. Try to remove it
.banner__caption {
bottom: 150px;
background-color: red;
max-width: 270px;
position: absolute;
transform: rotate(-90deg);
}

Answer 3

I would use position:fixed. Something like:
.wrapper {
position: fixed;
left: 0px;
top: 0px;
background: red;
}
.content {
position: absolute;
bottom: 0px;
transform: rotate(90deg);
transform-origin: 0 100%;
background: red;
white-space: nowrap;
}
.read-up {
-webkit-transform: rotate(180deg);
}
<div class="wrapper">
<div class="content">
<div class="read-up">
Content goes hereeeeeeee
</div>
</div>
</div>