JSFiddle - React, Tailwind, and code Playground

HTML

<div style="overflow: auto; width: auto; display:block; max-height:130px; max-width:200px; background-color: #FFF; height: auto; border: 1px double #336699; padding-left: 2px;">

    <label for="chk12" >
        <input type='checkbox' id="chk12" name='chk_colours' value="12" class='validate[required] text-input text'>
        <div style='background-color:#FF8C00; width: 180px;' title="darkorange">&nbsp;&nbsp;</div>
    </label>    

    <label for="chk11">
        <input type='checkbox' id="chk11" name='chk_colours' value="11" class='validate[required] text-input text'>
        <div style='background-color:#D9D919; width: 180px;' title="brightgold">&nbsp;&nbsp;</div>
    </label>

    <label for="chk10" >
        <input type='checkbox' id="chk10" name='chk_colours' value="10" class='validate[required] text-input text'>
        <div style='background-color:#76EE00; width: 180px;' title="chartreuse2">&nbsp;&nbsp;</div>
    </label>

    <label for="chk9" >
        <input type='checkbox' id="chk9" name='chk_colours' value="9" class='validate[required] text-input text'>
        <div style='background-color:#2E0854; width: 180px;' title="indigo">&nbsp;&nbsp;</div>
    </label>

    <label for="chk8">
        <input type='checkbox' id="chk8" name='chk_colours' value="8" class='validate[required] text-input text'>
        <div style='background-color:#292929; width: 180px;' title="gray16">&nbsp;&nbsp;</div>
    </label>                    
</div>

CSS

label div{
    display: inline-block;
}