<h1>My chart</h1>
<div class="container">
  <p class="label">I am a Y axis label</p>
  <div class="chart">
    <svg width="100%" height="100%" viewBox="0 0 100 50">
      <polygon points="0,50 0.00,41.67 14.29,33.33 28.57,25.00 42.86,0.00 57.14,48.33 71.43,45.00 85.71,41.67 100.00,16.67 100,50" class="line"></polygon>
    </svg>
  </div>
  <p class="label">I am an X axis label</p>
</div>

.label {
  margin-block-start: 1em;
  padding-block-start: 1em;
  margin-block-end: 0;
  text-align: center;
  border-block-start: 1px solid red;
}

p:first-of-type {
  writing-mode: vertical-rl;
}

p:last-of-type {
  flex-basis: calc(100% - 3.2em);
  margin-inline-start: auto;
}

.chart {
  flex: auto;
  background: var(--color-primary-x-light);
  padding-block-start: 2em;
}

svg {
  display: block;
  fill: var(--color-primary);
}

.container {
  display: flex;
  flex-wrap: wrap;
  max-width: 30rem;
}

h1 {
  border-bottom: 1px solid var(--color-stroke);
  margin-bottom: 2rem;
  min-width: 20rem;
}