CSS Grid

HTML

<div class="PlotArea">
    <div class="yAxis">
        yAxis LAbel to Position
    </div>
    <div class="plot">
    <ul>
    <li>Plot Space Variable Height</li>
    <li>Plot Space Variable Height</li>
    <li>Plot Space Variable Height</li>
    <li>Plot Space Variable Height</li>
    <li>Plot Space Variable Height</li>
    <li>Plot Space Variable Height</li>
    </ul>
    </div>
    <div class="title">title</div>
    <div class="xAxis">xAxis</div>
</div>

CSS

.PlotArea {
  background: yellow;
  display: grid;
  grid-template-columns: 1fr 9fr;
  grid-template-rows: 1fr;
}

.yAxis {
  background: dodgerblue;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  transform-origin: 50% 50%;
  transform: rotate(270deg);
}

.title {
  background: pink;
  grid-column: 2;
  grid-row: 1;
  text-align: center;
}

.plot {
  background: orange;
  grid-column: 2;
  grid-row: 2;
}

.xAxis {
    background: aqua;
    grid-column: 2;
    grid-row: 3;
    text-align: center;
 }