javascript - JSのスペースに関するCSSの問題

Question

マップする凡例を作成してみました。

凡例は、色の名前とテキストの形式にする必要があります。（たとえば、青1-10）

色とテキストの間にスペースがあり、テキストが中央ではなく色に揃えられるようにしたいという問題。テキストはdivの中央にあります）

テキストを色の近くで左に揃える方法を教えてください。

CSSファイル

#legendWrapper {
position : absolute;
top : 700px;
right: 70px;
} 

 #legend {
    background-color: #FFF;
    margin: 10px;
    padding: 5px;
    width: 150px;
  }

 #legend p {
    font-weight: bold;
    margin-top: 3px;
  }

#legend div {
    clear: both;
}

.color {
    height: 12px;
    width: 12px;
    margin-right: 3px;
    float: left;  
    display: block;     
  }

JSファイル

        var legendWrapper = document.createElement('div');
            legendWrapper.id = "legendWrapper";
            parentSelector.appendChild(legendWrapper);

             var legend = document.createElement('div');
             legend.id = 'legend';

             var title = document.createElement('p')
             title.innerHTML = 'Map Title';
             legend.appendChild(title);

             for ( var i  = 0; i < 5  ;i++){
                 var legendItem = document.createElement('div');
                 var color = document.createElement('span');
                 color.setAttribute('class', 'color');
                 color.style.backgroundColor = "blue";
                 legendItem.appendChild(color);

                 var minMax = document.createElement('span');
                 minMax.innerHTML = "6100000" + ' - ' + "9050000";
                 legendItem.appendChild(minMax);

                 legend.appendChild(legendItem);                              

             }
             legendWrapper.appendChild(legend);