如何删除 div 右侧由于自动换行而出现的空白？

Question

将浏览器窗口重新缩放到非常小的尺寸时，总会有一些尺寸会导致右侧的文本由于自动换行而产生一些空间。如何将其与自动换行右对齐？

我尝试过的：

display: inline;
display: inline-block;
float: left;
white-space: nowrap; // not giving me the expected results as I want to keep the padding and the breaks

.page-container {
  padding: 160px 48px 48px 48px;
  margin: 0 auto;
  max-width: calc(1080px + 96px);
  height: 90%;
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: flex-end;
}

.title-container {
  background-color: red;
  max-width: 60vw;
  text-align: left;
}

<div className="page-container">
  <div className="title-container">
    <h1>
      Text <br /> More Text
    </h1>
    <br />
    <h3>Item1 / Item2 / Item3 / Item4 / Item5</h3>
    <br />
    <h2>Element1 / Element2 / Element3</h2>
  </div>
</div>

https://codesandbox.io/s/hungry-bash-f98ckp?file=/src/App.js:67-359