JSFiddle - React, Tailwind, and code Playground

HTML

<div class='section education '>
		<h2 class='v-directed-heading-right'> EDUCATION </h2>
		<div class='border-right'>
			
				<p>
					This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text
				</p>

		
		</div>
    </div>

CSS

.v-directed-heading-right{
	width:100px;
	position:absolute;
	right:0;
	transform:rotate(90deg);
	transform-origin:80px 80px;
	font-size:18px;
	font-weight:bold;

}
.border-right{
	position:relative;
	padding:20px 40px;
	width:100%;
    border: 1px solid #eee;
	margin-top:20px;
	margin-bottom: 20px;
	border-image:linear-gradient(to right,transparent 70%,#999 70%) 20;
	text-align:right;
}
.section{
  position:relative;
  padding:10% 7%;
  }