Misaligned "outline" with uneven number of divs - html

Question

My issue is that I wanted side-by-side elements with borders, but I noticed without doing some margin-hack it was difficult to use the border property and it still didn't look right. However when I use outline or box-shadow, I get this alignment issue at the end.
.inner {
outline: 1px solid black;
width: 50%;
height: 50px;
float: left;
margin: 0;
display: inline-block;
box-sizing: border-box;
position: relative;
background: #fff;
}
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
It looks alright when there's an even number of elements but when I have this last element it looks odd. Some might suggest I just make it fit to the end which would be okay but the size can be configurable sometimes so this could be a common occurrence.
What is the proper way to achieve this where the last element lines up the border(or outline) correctly?

Answer 1

Because you're using outline to create your border, the outlines at the center are actually overlapping one another. When you get to the bottom where there is only one div the outline is not being overlapped and therefore looks misaligned. You could solve this issues by building it as a table:
.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.column {
display: table-row;
}
.inner {
display: table-cell;
border: 1px solid black;
width: 50%;
height: 50px;
background: #fff;
}
<div class="table">
<div class="column">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="column">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="column">
<div class="inner"></div>
</div>
</div>