How to create a color box in front of a checkbox in html?

I want to create a checkbox with a small color box in front of it. This is the current code that I have written:

        <label class="container"  style="color: #0B9BCD"><div class="foo"></div>
            <input type="radio" name="radiobutton" id="highlight1" value="highlight1">               
          <span class="checkmark"></span>
        </label> 

where the class foo has the following style:

   .foo {
          float: left;
          width: 20px;
          height: 20px;
          margin: 5px;
          border: 1px solid black;
          background: #13b4ff;
        }

And the output I am getting is something like this:

How can I move the color box to the right of the checkbox?