チェックボックスの配置について

入力フォームを作成していて、チェックボックスで色を選択する項目があります。

https://jsfiddle.net/dkreoedL/14/#&togetherjs=yG1SLCDHKc

今は上記のurlのような形で奇麗には並べてウインドウを拡大していれば大丈夫なのですが、
ウインドウの大きさを変えても奇麗に並べられている状態にしたいです。
カラーはもう少し増え、横4つ縦4つになる予定です。

cssはど素人なのでわかりやすく教えて頂けると幸いです。
よろしくお願い致します。

html
1
2<table>
3<tr>
4  <td>カラー</td>
5  <td>
6     <div class="color">
7                    <div class="black">
8                        <label><input type="checkbox" name="color[]"  value="1">ブラック　　　
9                        <label class="colors" style="background-color: black"></label></label>&nbsp;&nbsp;
10                    </div>
11                    <br>
12                    <div class="white">
13                        <label><input type="checkbox" name="color[]"  value="2">ホワイト　　　
14                        <label class="colors" style="background-color: white"></label></label>&nbsp;&nbsp;
15                    </div>
16                    <div class="blue">
17                        <label><input type="checkbox" name="color[]"  value="3">ブルー　　　　
18                        <label class="colors" style="background-color: blue"></label></label>&nbsp;&nbsp;
19                    </div>
20                    <div class="orange">
21                        <label><input type="checkbox" name="color[]"  value="4">オレンジ　　　
22                        <label class="colors" style="background-color: orange"></label></label>&nbsp;&nbsp;
23                    </div>
24                    <div class="purple">
25                        <label><input type="checkbox" name="color[]"  value="5">パープル　　　
26                        <label class="colors" style="background-color: purple"></label></label>&nbsp;&nbsp;
27                    </div>
28                    <br>
29                    <div class="brown">
30                        <label><input type="checkbox" name="color[]" value="6">ブラウン　　　
31                        <label class="colors" style="background-color: brown"></label></label>&nbsp;&nbsp;
32                    </div>
33                    <div class="gray">
34                        <label><input type="checkbox" name="color[]"  value="7">グレー　　　　
35                        <label class="colors" style="background-color: gray"></label></label>&nbsp;&nbsp;
36                    </div>
37                    <div class="yellow">
38                        <label><input type="checkbox" name="color[]"  value="8">イエロー　　　
39                        <label class="colors" style="background-color: yellow"></label></label>&nbsp;&nbsp;
40                    </div>
41                </div>
42  </td>
43</tr>
44</table>
45

css
1.colors{
2   display: block;
3    width: 28px;
4    height: 27px;
5    font-weight: normal;
6    outline: 0;
7    border: none;
8    background: none;
9    -webkit-appearance: none;
10    -moz-appearance: none;
11    appearance: none;
12    -webkit-border-radius: 20px;
13    -moz-border-radius: 20px;
14    border-radius: 20px;
15    float: right;
16    margin-left: 8px;
17}
18
19.white {
20    position: fixed;
21    top: 11px;
22    right: 800px;
23}
24
25.blue {
26    position: fixed;
27    top: 11px;
28    right: 600px;
29}
30
31.orange{
32    position: fixed;
33    top: 11px;
34    right: 300px;
35}
36
37.brown{
38    position: fixed;
39    top: 57px;
40    right: 800px;
41}
42
43.gray{
44    position: fixed;
45    top: 57px;
46    right: 600px;
47}
48
49.yellow{
50    position: fixed;
51    top: 57px;
52    right: 300px;
53}
54
55