Html 需要垂直文本从底部开始与横幅左侧对齐

我有一些文字，我想垂直对齐我的横幅图像。 我希望文本从横幅图像的左下角开始。 我正在使用Drupal，所以我必须在横幅图像块旁边添加一个文本块

我希望它看起来像这样：

但是如果看起来像这样：

以下是提供横幅/文本的网站：

下面是我用来使垂直文本与横幅左侧对齐的css：

.vertical-text {
float: left;
transform: rotate(-90deg);
transform-origin: left bottom 0;

}

有人能帮我把文字正确对齐吗

谢谢

David

测试一下：

.vertical-text {
  float: left;
  transform: rotate(-90deg);
  transform-origin: left bottom 0;
  margin-right:-30px; //or change it until be that you want 
  margin-bottom:-100px; 
}

编辑

#header-image{
  position:relative;
  width:700px;
  height:300px;
  // ...
 }
.vertical-text {
   position:absolute;
   bottom:0;
   left:-20px;
   transform: rotate(-90deg);
   transform-origin: left bottom 0;
}


 <div id="header-image">
    <div class="vertical-text"></div>
 </div>

#标题图像{
位置：相对位置；
宽度：700px；
高度：300px；
// ...
}
.垂直文本{
位置：绝对位置；
底部：0；
左：-20px；
变换：旋转（-90度）；
变换原点：左下角0；
}

您可以做的一件事是在div

content

之后为p标记创建类，并在css下面添加

我已经检查过了，看到截图了吗

<div class="content">
    <p class="zeroo"">
<a href="/abouttheartist">About the Artist</a></p>
  </div>

.zeroo{
position: absolute;
bottom:0px;
left: -340px;
}