JSFiddle - React, Tailwind, and code Playground

HTML

<div class="column-content-one">
     
     <span>
       <span class="rotate">
        <span style="displock;width:100%;font-size: 55px;color: #222222;opacity: 0.15;white-space: nowrap;">BACKGROUND</span>
				<span style="display:block;width:100%;font-size: 45px;color: #222222;text-align:center;">TITLE</span>
       </span>
    </span>
</div>
<div class="column-content-two">
     
     <span>
       Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element
    </span>
</div>

CSS

.column-content-one {
        display: inline-block;
        position:relative;
        width:29%;
    }
    .column-content-two {
        display: inline-block;
        position:relative;
        width:70%;
    }


span { display:inline-block; vertical-align:bottom; }

.rotate {
   display: inline-block;
   white-space: nowrap; 
   transform: translate(0,100%) rotate(-90deg);
   transform-origin: 0 0;
   vertical-align: bottom;   
}
.rotate:before {
   content: "";
   float: left;
   margin-top: 100%;
   
}
.rotate:after {
   content: "";
   display: inline-block;
}