如何使我的旋转跨度适合我的div？

Question

我无法想到一个更好的头衔，因为我不知道如何描述我想要的东西。所需的效果是白色框中的旋转txt填充蓝色区域（它只是为了说明我想要的蓝色）。

我使用bootstrap所以我想以一种不与当前网格系统布局冲突的方式执行此操作。我是css和编程的新手，所以我不知道一个不相关的风格是否会导致/减轻我的问题。为了使帖子清晰可见，我只会包含我认为必要的内容。

＆＃13;

＆＃13;

body {
  font-family: 'Josefin Sans', sans-serif;
  background: url(C:/Users/user/Desktop/Programming/CSSzen/assets/images/onestones.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  font-size: 16px;
  .example {
    width: 90%;
  }
  .container {
    padding: 3%;
    margin: none;
  }
  .blockcontainer {
    width: 45%;
    min-width: 450px;
    text-align: justify;
    box-sizing: border-box;
    padding: 4%;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
  }
  .imagecontainer {
    width: 45%;
    min-width: 450px;
    text-align: justify;
    padding: 0;
    background: rgba(0, 0, 255, 0.5);
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    text-decoration: none;
  }
  .rotate {
    display: inline-block;
    float: right;
    position: absolute;
    width: 10vh;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
    -webkit-transform: rotate(+90deg);
    -moz-transform: rotate(+90deg);
    -ms-transform: rotate(+90deg);
    -o-transform: rotate(+90deg);
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
  }

＆＃13;

<div class="row container">
  <div id="firstblock" class="blockcontainer col-sm-6">

    <--!There was some text within this div which I removed as it was too long-->

  </div>
  <div class="imagecontainer col-sm-6">
    <img class="example" src="C:/Users/user/Desktop/Programming/CSSzen/assets/imagessteel.png">
    <span class=" rotate">  
                        <p>Steel by Steffen Knoeller</p>
                    </span>
  </div>
</div>
<--!the container div is throughout the whole document so the closing tag is a long way down the code>

＆＃13;

＆＃13;

＆＃13;

重申一下，我是新手，所以我不确定我是否在此处提供了所有必要的信息。