HTML表末尾的旋转Div

我认为这是一项看似微不足道的任务，但所花的时间比我预期的要长，而且还没有接近解决它。我有一个HTML表，其中将包含一些数据。在表格的右侧，我想显示一个旋转的div，其中包含一些文本，如下所示：

我已经设法按照自己的意愿创建了表格，但我一辈子都不能让“Reporting”div在表格的一侧对齐

这是我迄今为止的代码尝试，有人能为我提供实现目标的任何指针吗

.container{
字体系列：“开放式Sans”，无衬线；
字号：x大号；
保证金：0；
颜色：黑色；
填充物：1em 0.5em；
字号：900；
}
.表格续{
}
桌子{
宽度：100%；
边缘底部：0.5em；
字号：1em；
边界塌陷：塌陷；
边界间距：0；
宽度：60%；
}
表td{
/*边界半径：15px*/
边框：1px纯黑；
文本对齐：居中；
线高：100px；
}
表td.colFY{
宽度：100px；
背景色：#887870；
}
表td.norm{
背景色：#B8B8；
颜色：#082860；
}
div{
显示：内联；
}
.这边{
背景#b8b8；
底部：100%；
身高：100%；
边界半径：15px；
显示：内联；
垂直对齐：中间对齐；
-webkit变换：旋转（90度）；
变换原点：0.100%；
}

2018财年
主题1
主题2
2019财年
科目3
科目4
FY20
科目5
科目6
报告

th.rotate{
/*你可以信赖的东西*/
高度：140像素；
空白：nowrap；
}
旋转>分割{
转换：
/*幻数*/
翻译（25px，51px）
/*45真的是360-45*/
旋转（315度）；
宽度：30px；
}
旋转>分割>跨度{
边框底部：1px实心#ccc；
填充物：5px10px；
}
****
列标题1

您可以查看此链接：-

只需使用css旋转：

及

.vtext{
/*狩猎*/
-webkit变换：旋转（-90度）；
/*火狐*/
-moz变换：旋转（-90度）；
/*即*/
-ms变换：旋转（-90度）；
/*歌剧院*/
-o变换：旋转（-90度）；
/*Internet Explorer*/
过滤器：progid:DXImageTransform.Microsoft.BasicImage（旋转=3）；
}

报告
2018财年
主题1
主题2
2018财年
主题1
主题2
2018财年
主题1
主题2

th.rotate {
  /* Something you can count on */
  height: 140px;
  white-space: nowrap;
}

th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(25px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}

****
<th class="rotate"><div><span>Column header 1</span></div></th>

.side {
  background: #B8B8B8;
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}