CSS-only way to prevent break after inline block before period character without tag around period

Question

I'm trying to prevent period and other punctuation characters after inline blocks (with a specific class) from being wrapped to the next line. I want to avoid wrapping the inline block and subsequent punctuation it in a no-wrap-styled tag, since that requires knowing in advance where all of these situations might come up and I do not know that. I could use JavaScript to inject that structure everywhere it's needed, but I'd like to avoid it if possible, since my intuition is that that could get messy.

It is a requirement to preserve the background and padding, so display: contents will not work:

display: contents makes that the div doesn’t generate any box, so its background, border and padding are not rendered. However the inherited properties like color and font have effect on the child (span element) as expected.

My two-part question is this: can this be done without a tag around the inline-block and punctuation, and, if so, how?

Screenshot (from Firefox 62 on macOS 10.13.6) in case rendering differences mask the problem:

div {
  width: 309px;
  background: #EEE;
}

span.help-block {
  width: 111px;
  background: #DDD;
}

span.inline-code {
  display: inline-block;
  background: #CCC;
  color: #333;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 1px;
  margin-top: -1px;
  padding-bottom: 1px;
  margin-bottom: -1px;
  font-family: Courier, Monaco, monospace;
  font-size: .9em;
}

<div>
  <span class="help-block">To escape commas, put quotes around the value, e.g., <span class="inline-code">a,b,c,"a,b,c"</span>. To escape those quotes, double them, e.g., <span class="inline-code">a,b,"a,""b"",c"</span>.</span>
</div>

https://jsfiddle.net/don01001100/ravjykdb/9/