How to position text vertically beside image depending on image size?

Question

How can I position text vertically beside an image next to its bottom right corner? The image is always centered but it isn't always the same size, it can have different width and height. Example of what I am trying to accomplish

Here is the Codepen

.featuredimg {
  position: relative;
  text-align: center;
  margin-bottom: 20px; 
}

.author {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(90deg) translate(-50%,-100%);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="featuredimg">
  <img src="https://via.placeholder.com/550">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

<div class="featuredimg">
  <img src="https://via.placeholder.com/850">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

<div class="featuredimg">
  <img src="https://via.placeholder.com/1250">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

Answer 1

Apply display: inline-block to the image/s and use transform-origin: bottom right on the rotated element which contains the text. You can use the bottom parameter in .author to fine-tune the exaxt vertical position of the text.

.featuredimg {
  position: relative;
  text-align: center;
  margin-bottom: 20px; 
  display: inline-block;
  vertical-align: bottom;
}

.author {
    position: absolute;
    right: 0;
    bottom: 4px;
    transform: rotate(90deg);
    transform-origin: bottom right;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="featuredimg">
  <img src="https://via.placeholder.com/550">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

<div class="featuredimg">
  <img src="https://via.placeholder.com/850">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

<div class="featuredimg">
  <img src="https://via.placeholder.com/1250">
  <div class="author">Author: Asadfasdfasdf</div>
</div>