12 display: inline-block;
13 vertical-align: bottom;
22 .first { right:
10px; }
23 .second { right:
70px; }
26 background-color: lightblue;
30 border: solid dodgerblue;
31 box-sizing: border-box;
34 .special
> .first
> span {
39 .special
> .second span:first-child {
43 background-color: white;
45 .special
> .second span:last-child {
51 The blue borders should coincide with light blue squares, like this:
52 <span style=
"display: inline-block; background-color: lightblue; border: solid dodgerblue; width: 19px; height: 19px;"></span>.
53 There should be none of this:
54 <span style=
"display: inline-block; background-color: lightblue; width: 25px; height: 25px;"></span>
56 <span style=
"display: inline-block; border: solid dodgerblue; width: 19px; height: 19px;"></span>.
59 <div class=
"column first"><br><span></span></div>
60 <div class=
"column second"><span></span><span></span></div>
63 <div class=
"column first"><br><span></span></div>
64 <div class=
"column second"><span></span><span></span></div>
67 <div class=
"column first"><br><span></span></div>
68 <div class=
"column second"><span></span><span></span></div>
71 <div class=
"column first"></div>
72 <div class=
"column second"><span></span><span></span></div>
75 <div class=
"column second"><span></span></div>
78 <div class=
"column second"><span></span></div>
81 Except here, where the blue border should be around the bigger slice of the blue square, on the left.
83 <div class=
"columns special">
84 <div class=
"column first"><span></span></div>
85 <div class=
"column second"><span></span><span></span></div>