Pure-CSS - Hide text completely if it doesn't fit in div

Question

In my example there is a diagram, which has a horizontal bar that changes its width. The legend of that bar is shown inside but should only be visible as long as there is enough space to display the string completely.

I tried to adjust the parent container (bar, that changes width), so has the following properties:
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

Here is the code pen: https://codepen.io/DerLukas/pen/VwvBbEN

In this example the string "BASE" should not be shown, because it does not fit in the white bar.

example picture

<div id="modeChart">
  <div class="bar">
    <p class="label">BASE</p>
  </div>
</div>