I encountered a challenge while trying to create side-by-side elements with borders. I found that using the border property without adding some margin-hack made it difficult to achieve the desired look. Even when experimenting with outline or box-shadow, I faced alignment issues towards the end.
https://i.sstatic.net/pGYxf.png
.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>While everything seems fine with an even number of elements, the last element causes a misalignment issue. Some may suggest adjusting the size to fit the end, but since the size can vary, this solution might not always work. What is the correct approach to ensure proper alignment for the last element's border (or outline)?