Vertical text always remain same distance from side of image - html

Question

I have an image with some vertical text giving credit on the photo.
I want to ensure that the text always stays outside the image when it becomes responsive.
I am trying to put the text just outside the image, and at the bottom right of the image.
Here is the snippet
section {
max-width: 300px;
margin: 0 auto;
}
img {
width: 93%;
}
.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: left top 0;
-moz-transform: rotate(90deg);
-moz-transform-origin: left top 0;
float: right;
}
<div class="section">
<div class="vertical-text">Photo Credit</div>
<img src="http://www.wrestlingwithpopculture.com/wp-content/uploads/2013/03/BRET-HART-06b.jpg">
</div>

Answer 1

Here you go, I think this is close.
Note the image width calculation. In general the text will have a line-height (which once rotated becomes teh width) of 1.2em...so if we make the image 100% less that amount, there should always be room for the text block.
.section {
max-width: 300px;
margin: 0 auto;
text-align: center;
background: pink;
}
img {
width: calc(100% - 1.2em);
display: block;
}
.img-wrap {
display: inline-block;
position: relative;
}
.vertical-text {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 50%) rotate(90deg);
transform-origin: top left;
}
<div class="section">
<div class="img-wrap">
<div class="vertical-text">Photo Credit</div>
<img src="http://www.wrestlingwithpopculture.com/wp-content/uploads/2013/03/BRET-HART-06b.jpg">
</div>
</div>
JSfiddle Demo

Answer 2

if i understood right. you want the text to be outside of the photo to the right
to .vertical_text add this width:0%;white-space:nowrap;
EDIT :
on mobile with media query make the img smaller. 85% instead of 93%. that should do it. you need to have enough space for the text to fit in. also you could make the font-size of the text smaller if you want. but changing the img size should be enought.
To align the text on the bottom it's a bit tricky because of the rotation.
use this
at .section add position:relative
at .vertical_text add position:absolute;bottom:68px;right:0
where bottom:68px is the actual width of your text