Trying to get the color box and the color word to wrap together, not separately, using no CSS

Code

<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#70CBD2; margin:0 2px 0 7px;"></span><span>blue,</span>
<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#9BCD13; margin:0 2px 0 7px;"></span><span>green,</span>
<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#C40F89; margin:0 2px 0 7px;"></span><span>pink,</span>
<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#818085; margin:0 2px 0 7px;"></span><span>grey</span>