带有旋转菜单标题的垂直侧边菜单（-90 度）

Question

1. I want to make a side menu like the one in the following image.

2. Mine looks like the one in the 2nd picture. If I add them inside one < p > tag they break into multiple lines.

If I write the title into one < p > tag.
这是我的代码：

<div class="vert">
<p class="mga">
<br><br>
A Messnage From The CEO</p>


</div>
<style>
.vert{
font-stretch:inherit;
}
.mga  transform: rotate(-90deg);</p>
<p>  /* Legacy vendor prefixes that you probably don't need... */</p>
<p>  /* Safari */  -webkit-transform: rotate(-90deg);</p>
<p>  /* Firefox */<br />  -moz-transform: rotate(-90deg);</p>
<p>  /* IE */  -ms-transform: rotate(-90deg);</p>
<p>  /* Opera */ -o-transform: rotate(-90deg);</p>
<p>  /* Internet Explorer *  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}</style>