Keep certain divs together when wrapping - css

Question

I have a container with multiple sibling div elements. These elements are interrupted by other div elements that are technically siblings yet are not like the others. They're not delimiters but that is a decent analogy. I want to keep the div-clusters between delimiters together on the line when a wrap happens. In the snippet below, there are five such clusters: ABC, DEFGH, IJKLM, and NO.
Is it possible to add an identifying class to each div in a cluster that belongs together, and then apply css to that class that would keep them together? I am hoping to avoid changing the structure.
#foo div{
text-align: center;
display: inline-block;
}
#foo p[contenteditable="true"] {
/* font-size: 22px;*/
height: 22px;
width: 22px;
color: black;
font-weight: bold;
/* border: 1px dotted black;*/
background-color: cyan;
}
#foo p.const {
background-color: inherit;
border: none;
height: 22px;
width: 22px;
}
<div id="foo">
<div class="group">
<p contenteditable="true" tabindex="0"></p>
<p>A</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="1"></p>
<p>B</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="2"></p>
<p>C</p>
</div>
<div>
<p class="const"> </p>
<p> </p>
</div>
<div class="group">
<p contenteditable="true" tabindex="3"></p>
<p>D</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="4"></p>
<p>E</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="5"></p>
<p>F</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="6"></p>
<p>G</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="7"></p>
<p>H</p>
</div>
<div>
<p class="const"> </p>
<p> </p>
</div>
<div>
<p class="const">"</p>
<p>"</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="8"></p>
<p>I</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="9"></p>
<p>J</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="10"></p>
<p>K</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="11"></p>
<p>L</p>
</div class="group">
<div>
<p contenteditable="true" tabindex="12"></p>
<p>M</p>
</div>
<div>
<p class="const"> </p>
<p> </p>
</div>
<div>
<p class="const">"</p>
<p>"</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="13"></p>
<p>N</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="14"></p>
<p>O</p>
</div>
</div>