How to force two blocks, of 2 x pairs in a div, to stay side-by-side ie. each pair cannot be split?

Question

I'm relatively new to HTML/CSS and Liquid. And I am trying to create and style a couple of custom blocks in a Product Page that will show in the page as 2 x pairs of blocks in one div

I have created this with the code below, and it works well, except for mobile screen where the wrapper forces the 4th block to break onto a new line. I'm wondering if there is a way to force the pairs of two blocks to stay together, so a pair will be forced down to a new line rather than breaking a pair?? Any help would be greatly appreciated. Thanks

<div><p style="
  display: inline-block;
  background: #9b845a;
  padding: 6px 6px 6px 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #9b845a;
  border-radius: 20px 0px 0px 20px;
  margin: 0px 0px 5px 0px;
  color: #ffffff;
  font-weight: bolder;"
<p>Condition
<p style="
  display: inline-block;
  background: #ffffff;
  padding: 6px 10px 6px 6px;
  border-style: solid;
  border-width: 2px;
  border-color: #9b845a;
  border-radius: 0px 20px 20px 0px;
  margin: 0px 0px 5px 0px;
  color: #232323;
  text-align: left;
  font-weight: bolder;"
<p>Condition Text pulled from custom Product field</p>
<p style="
  display: inline-block;
  background: #9b845a;
  padding: 6px 6px 6px 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #9b845a;
  border-radius: 20px 0px 0px 20px;
  margin: 0px 0px 5px 10px;
  color: #ffffff;
  font-weight: bolder;"
<p>Size
<p style="
  display: inline-block;
  background: #ffffff;
  padding: 6px 10px 6px 6px;
  border-style: solid;
  border-width: 2px;
  border-color: #9b845a;
  border-radius: 0px 20px 20px 0px;
  margin: 0px 0px 5px 0px;
  color: #232323;
  text-align: left;
  font-weight: bolder;"
<p>Size Text pulled from custom Product field</p></div>

Issue: the 4th block is forced down to a new line on Mobile Screens. I'd like to force blocks 1 & 2, and 3 & 4, to stay together so the label and the text do not split?

Answer 1

You can wrap in another inline-blocked tag and use white-space:nowrap. I use span since your initial markup was invalid. Note I removed the whitespace between the pair of inline elements to make sure the whitespace did not mess up the display

NOTE: I recommend you extract the CSS from the elements and use classes with a CSS stylesheet

<div>
  <p style="display:inline-block; white-space: nowrap;"><span style="
  display: inline-block;
  background: #9b845a;
  padding: 6px 6px 6px 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #9b845a;
  border-radius: 20px 0px 0px 20px;
  margin: 0;
  color: #ffffff;
  font-weight: bolder;">Condition</span><span style="
  display: inline-block;
  background: #ffffff;
  padding: 6px 10px 6px 6px;
  border-style: solid;
  border-width: 2px;
  border-color: #9b845a;
  border-radius: 0px 20px 20px 0px;
   margin:0;
  color: #232323;
  text-align: left;
  font-weight: bolder;">Condition Text pulled from custom Product field</span></p>
  <p style="display:inline-block; white-space: nowrap;"><span style="
  display: inline-block;
  background: #9b845a;
  padding: 6px 6px 6px 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #9b845a;
  border-radius: 20px 0px 0px 20px;
  margin: 0px 0px 5px 10px;
  color: #ffffff;
  font-weight: bolder;">Size</span><span style="
  display: inline-block;
  background: #ffffff;
  padding: 6px 10px 6px 6px;
  border-style: solid;
  border-width: 2px;
  border-color: #9b845a;
  border-radius: 0px 20px 20px 0px;
  margin: 0px 0px 5px 0px;
  color: #232323;
  text-align: left;
  font-weight: bolder;">Size Text pulled from custom Product field</span></p>
</div>