Denoting a preferred place for a line break (non-table version)

Question

Let's say I have this text that I want to display:

You can add more team members. Together, you can collaborate on company tasks.

and I prefer any line break after the period, but not if that comes at the expense of an extra line.

Illustration:

Is this possible using only CSS (without JavaScript?). If yes, a CSS sample would be greatly appreciated.

Below is my sample code. As you can see, inline-block is desirable for some screen widths, but sometimes adds the undesirable extra line.

const withInlineBlock = document.getElementById('with-inline-block');
const withoutInlineBlock = document.getElementById('without-inline-block');
const withInlineBlockContainer = document.getElementById('with-inline-block-container');
const withoutInlineBlockContainer = document.getElementById('without-inline-block-container');
const fader = document.getElementById('fade-indicator');
let withInlineBlockHeight = 0;
let withoutInlineBlockHeight = 0;
window.addEventListener("resize", onResize);

function showBestVersion() {
  withInlineBlockContainer.style.display = "block";
  withoutInlineBlockContainer.style.display = "block";
  withInlineBlockHeight = withInlineBlock.clientHeight;
  withoutInlineBlockHeight = withoutInlineBlock.clientHeight;
  if (withInlineBlockHeight > withoutInlineBlockHeight) {
    withInlineBlockContainer.style.display = "none";
    withoutInlineBlockContainer.style.display = "block";
  } else {
    withInlineBlockContainer.style.display = "block";
    withoutInlineBlockContainer.style.display = "none";
  }
}

function onResize() {
  showBestVersion();
  // indicate resize
  fader.classList.remove('fadeout');
  fader.classList.add('alert');
  setTimeout(function() {
    fader.classList.add('fadeout');
  }, 500); // wait time in milliseconds before fading out
}
showBestVersion();

body { font-size: 32px; font-family: Helvetica, sans-serif; }
h1 { font-size: 48px; }
p.block span { display: inline-block; }
.green { /*background-color: lightgreen;*/ }
.blue { /*background-color: lightblue;*/ }
#fade-indicator { color: white; }
.alert { background-color: red; }
.fadeout { background-color: initial; transition: 0.5s; }

<div id="with-inline-block-container">
  <h1>Inline-block: Yes</h1>
  <p id="with-inline-block" class="block">
    <span class="green">You can add more team members.</span>
    <span class="blue">Together, you can collaborate on company&nbsp;tasks.</span>
  </p>
</div>
<div id="without-inline-block-container">
  <h1>Inline-block: No</h1>
  <p id="without-inline-block">
    <span class="green">You can add more team members.</span>
    <span class="blue">Together, you can collaborate on company&nbsp;tasks.</span>
  </p>
</div>
<p><span id="fade-indicator">&nbsp;resized&nbsp;</span></p>

Above example: If using JavaScript, on viewport resize, you can test the element height with and without the inline-block, and use the inline-block version unless it is higher than the non-inline-block version. That yields the desired result. (Fine-tuning: a   to stop orphaning the last word.)

But I'm interested in having confirmed that JavaScript is actually necessary, and that this typographical preference can't be set with CSS.

Related SO questions that does not answer this request: 1, 2, 3, 4