Auto expand rotated columns CSS - css

Question

I'm trying to automatically expand the rotated columns automatically when there is more text.
I have tried a variety of css such as removing the tranform-origin or using translateX(-50%) translateY(-50%) rotate(-90deg); options.
I wondered if I am missing anything?
Sample of code below is what I'm working on.
.tcentre {
text-align: center;
}
/*Events Matrix*/
.matrix table,
.matrix td,
.matrix th {
border-spacing: 0;
border: 1px solid;
text-align: left
}
.matrix .vert>th:nth-child(1n+3) {
position: relative;
height: 150px;
min-width: 40px;
padding: 4px;
}
.matrix .vert>th {
overflow: hidden;
}
.matrix .vert>th>div>div {
height: 100%;
line-height: 18px;
width: 150px;
position: absolute;
bottom: -145px;
/*border: 1px solid blue; */
transform: rotate(-90deg);
transform-origin: top left;
}
.matrix .tbottom {
vertical-align: bottom !important;
text-align: left !important;
}
<DIV id="content" class="matrix">
<table>
<thead>
<tr class="vert">
<th class="tbottom" style="Width: 100px;">Part</th>
<th class="tbottom" style="Width: 100px;">Name</th>
<th style="Width: 20px;">
<div>
<div>Park<br>2018-08-12</div>
</div>
</th>
<th style="Width: 20px;">
<div>
<div>War Memorial Lots more text in this cell<br>2018-08-19</div>
</div>
</th>
<th style="Width: 20px;">
<div>
<div>Charity Collection<br>2018-10-13</div>
</div>
</th>
<th style="Width: 20px;">
<div>
<div>Concert<br>2018-10-28</div>
</div>
</th>
<th style="Width: 20px;">
<div>
<div>Remembrance<br>2018-11-10</div>
</div>
</th>
</tr>
<tr>
<td class="nowrap">Score</td>
<td class="nowrap">Person 1</td>
<td class="tcentre colour-Y">Y</td>
<td class="tcentre colour-Y">Y</td>
<td class="tcentre colour-Y">Y</td>
<td class="tcentre colour-Y">Y</td>
<td class="tcentre colour-Y">Y</td>
</tr>
<tr>
<td class="nowrap">Solo Cornet</td>
<td class="nowrap">Person 2</td>
<td class="tcentre colour-Y">Y</td>
<td class="tcentre colour-" />
<td class="tcentre colour-" />
<td class="tcentre colour-" />
<td class="tcentre colour-" />
</tr>
</thead>
</table>
</Div>