title: Created color boxes for a legend in HTML and CSS, but can't get two color boxes on the same line
body: <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>