Created color boxes for a legend in HTML and CSS, but can't get two color boxes on the same line
<p>I'm currently in the process of creating a legend for a table that has highlighted rows, but I can't seem to get two color boxes on the same <code>li</code>.</p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;
        &lt;div class="input-color"&gt;
            &lt;input type="text" value="Blue/White - Alternating Rows" readonly="true" style="border:0;width:200px"/&gt;
            &lt;div class="color-box" style="background-color: #6DC2FF;"&gt;&lt;/div&gt;
            &lt;div class="color-box" style="background-color: white;"&gt;&lt;/div&gt;    
        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>With the following CSS...</p>

<pre><code>ul {
    list-style: none;
    margin: 0;
    padding: 0;       
   }

.input-color {
    position: relative;
}

.input-color input {
    padding-left: 20px;
    margin-bottom: 10px;
}

.input-color .color-box {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #ccc;
    position: absolute;
    left: 5px;
    top: 5px;
    border: 1px solid #000;
}
</code></pre>

<p>Any ideas? Assuming I know how to use JSFiddle, here it is:</p>

<p><a href="https://jsfiddle.net/1ywpxxks/1/" rel="nofollow">https://jsfiddle.net/1ywpxxks/1/</a></p>