Estoy con el siguiente problema, como verán en la imagen tengo un rectángulo que dice "01 SEMESTRE", ese es una etiqueta de párrafo obviamente está rotada y lo que necesito es acomodarlo en línea con la lista desordenada que ahí se ve.
¿Cómo podria lograr esto?
Este es mi codigo html y css que tengo hasta este momento
<table style="width: 100%;">
<tr>
<td style="background-color: #2DBCC0; width: 50px; border-radius: 3px; padding-left: 4px; padding-right: 4px;">
<img src="img/puntos.png" width="50" style="display: block; margin: 30px auto 10px;">
<img src="img/cc03.png" width="80" style="margin-bottom: 8px;">
<img src="img/cc04.png" width="80" style="margin-bottom: 8px;">
</td>
<td style="background-color: #FDDDC7; border-radius: 3px; padding-left: 8px; padding-right: 8px;">
<h5 style="color: #F58634;">PLAN DE ESTUDIOS</h5>
<div style="background-color: #0000ff; display: table;">
<p style="display: block; background-color: #2DBCC0; padding: 4px 3px; color: #FFFFFF; font-weight: bold; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); margin-left: 0; float: left;">
01 SEMESTRE</p>
<ul style="font-size: 15px; background-color: #ff0000; width: 90%; float: right;">
<li><span>Fundamenetos clínicos del abusador y de la victima maltratada y abusada</span></li>
<li><span>Detección y tratamiento del abuso sexual</span></li>
<li><span>Personas y Familia</span></li>
<li><span>Derecho Penal</span></li>
</ul>
</div>
</td>
</tr>
</table>