As a newcomer to HTML/CSS and Liquid, I am exploring the creation and styling of custom blocks on a Product Page. My goal is to display these custom blocks in pairs within a single div.
The current code structure I have implemented functions well, with one exception - on mobile screens, the layout breaks and the 4th block moves onto a new line within the wrapper. I am seeking advice on how I can keep the pairs of two blocks together, so that when the layout shifts, a pair will move down to a new line as a unit instead of separating? Any assistance on resolving this issue would be highly appreciated. Thank you.
<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?