Rotated text on left border of responsive div - html

Question

I am facing issue making text around the borders of a div, with dynamic content/images.
Here is html code:
<div class="fp-wrapper">
<a href="/url1">
<img class="fp-image" src="image1.jpg">
</a>
<p class="fp-title1">Text on top border</p>
<p class="fp-title2">Text on left border</p>
</div>
css:
.fp-wrapper {
position: relative;
display: inline-block;
margin: auto;
}
.fp-image {
width: 80%;
float:left;
padding: 10px;
border: 1px solid #53565a;
z-index: 1;
}
.fp-title1, .fp-title2{
padding: 0 10px;
background: #fff;
position: absolute;
top: 0;
left: 30px;
color: #53565a;
text-transform: uppercase;
font-weight: 500;
}
.fp-title2 {
bottom: 50%;
top: unset !important;
transform: translate(-50%,-50%) rotate(-90deg);
}
Fiddle: https://jsfiddle.net/wutzbvef/
Now the problem is that the content is dynamic, so min-height/max-height or negative margins won't work (I think so). Also I need to make it responsive, covering the border. Is this approach correct or need to make it by some other approach. Please help.
Edit:
I may not explained better, but I basically want to vertical align top the -90deg rotated paragraph i.e. .fp-title2

Answer 1

Use transform-origin
.fp-wrapper {
position: relative;
display: inline-block;
margin-left: 50px;
}
.fp-image {
width: 100%;
padding: 10px;
border: 1px solid #53565a;
z-index: 1;
}
.fp-title1,
.fp-title2 {
padding: 0 10px;
background: #fff;
position: absolute;
top: 0;
left: 30px;
color: #53565a;
text-transform: uppercase;
font-weight: 500;
}
.fp-title2 {
transform: translate(-100%, 0%) rotate(-90deg);
transform-origin: right center;
}
.w2 .fp-image {
width: 80%;
}
.w3 .fp-image {
width: 60%;
}
<div class="fp-wrapper">
<a href="/url1">
<img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
</a>
<p class="fp-title1">Text on top border</p>
<p class="fp-title2">Text on left border</p>
</div>
<div class="fp-wrapper w2">
<a href="/url1">
<img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
</a>
<p class="fp-title1">Text on top border</p>
<p class="fp-title2">Text on left border</p>
</div>
<div class="fp-wrapper w3">
<a href="/url1">
<img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
</a>
<p class="fp-title1">Text on top border</p>
<p class="fp-title2">Text on left border</p>
</div>

Answer 2

Try rotating first, then re-center the div. Otherwise it's ok.
transform: rotate(-90deg) translate(-50%, -50%);
You can also use a variable font-size for smaller images.
(I would also use an :after class for this btw), use the a tag, like this:
.fp-wrapper {
}
.fp-wrapper a {
width: 40%;
display:inline-block;
position: relative;
z-index:1;
float:left;
padding: 10px;
border: 1px solid #53565a;
}
.fp-image {
width: 100%;
}
.fp-wrapper a:before{
position: absolute;
content:'text top';
padding: 0 10px;
background: #fff;
display:inline-block;
top: 0px;
left: 50%;
transform: translateX(-50%);
color: #53565a;
text-transform: uppercase;
font-weight: 500;
z-index:20;
}
.fp-wrapper a:after {
position:absolute;
content:"left text";
display:inline-block;
text-transform: uppercase;
font-weight: 500;
padding: 0 10px;
top:50%;
transform: translateX(-50%) rotate(-90deg);
left:10px;
z-index:10;
background-color:#fff;
}
<div class="fp-wrapper">
<a href="/url1">
<img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
</a>
</div>
<div class="fp-wrapper">
<a href="/url1" style="width:30%;">
<img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
</a>
</div>