Background color for two spans, need to fill the space in between as with the same color

Question

https://codepen.io/Deepu55555/pen/YBQxYd

HTML

<h1>Background Color</h1>

<div>Set a background color for a div element.</div>

<p>Set a <span>background</span> <span>color</span> for only a part of a text.</p>

CSS

body {
  background-color: #fefbd8;
}

h1 {
  background-color: #80ced6;
}

div {
  background-color: #d5f4e6;
}

span {
  background-color: #f18973;
}

I have two spans and assigned background color for both of them, is there any way I could fill the extra space with the same background color as the previous one? so that the background color doesn't separate between two spans?