<!DOCTYPE html>
<style>
    div.columns {
        height: 50px;
        width: 110px;
        margin: 10px 0;
        padding: 10px;
        border: solid black;
        font-family: Ahem;
        font-size: 25px;
        color: lightblue;
        display: inline-block;
        vertical-align: bottom;
        position: relative;
    }

    .column {
        position: absolute;
        width: 25px;
    }

    .first { right: 10px; }
    .second { right: 70px; }

    .column > span {
        background-color: lightblue;
        display: block;
        width: 25px;
        height: 25px;
        border: solid dodgerblue;
        box-sizing: border-box;
    }

    .special > .first > span {
        margin-top: 40px;
        height: 10px;
        border: none;
    }
    .special > .second span:first-child {
        border-bottom: none;
        height: 10px;
        margin-top: -10px;
        background-color: white;
    }
    .special > .second span:last-child {
        border-top: none;
        height: 15px;
    }
</style>
<p>
    The blue borders should coincide with light blue squares, like this:
    <span style="display: inline-block; background-color: lightblue; border: solid dodgerblue; width: 19px; height: 19px;"></span>.
    There should be none of this:
    <span style="display: inline-block; background-color: lightblue; width: 25px; height: 25px;"></span>
    or this:
    <span style="display: inline-block; border: solid dodgerblue; width: 19px; height: 19px;"></span>.
</p>
<div class="columns">
    <div class="column first"><br><span></span></div>
    <div class="column second"><span></span><span></span></div>
</div>
<div class="columns">
    <div class="column first"><br><span></span></div>
    <div class="column second"><span></span><span></span></div>
</div>
<div class="columns">
    <div class="column first"><br><span></span></div>
    <div class="column second"><span></span><span></span></div>
</div>
<div class="columns">
    <div class="column first"></div>
    <div class="column second"><span></span><span></span></div>
</div>
<div class="columns">
    <div class="column second"><span></span></div>
</div>
<div class="columns">
    <div class="column second"><span></span></div>
</div>
<p>
    Except here, where the blue border should be around the bigger slice of the blue square, on the left.
</p>
<div class="columns special">
    <div class="column first"><span></span></div>
    <div class="column second"><span></span><span></span></div>
</div>