JSFiddle - React, Tailwind, and code Playground

HTML

<main>
    <div>
        <p>&nbsp; </p><p>Span</p>
    </div>
    <div>
        <p>Span</p><p>Span</p><p>Span</p>
    </div>
    <div>
        <p>Span</p><p>Span Span Span Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p>
    </div>
    <div>
        <p>Span</p><p>Span</p><p>Span</p>
    </div>
    <div>
        <p>&nbsp; </p><p>Span</p>
    </div>
</main>

CSS

main {
    position:relative; /* должно быть отлично от static */
    overflow:hidden;
    background:silver;
}
div {
    vertical-align:baseline;     /* вертикальное выравнивание любое top, bottom, middle... */
    display:inline-block;
    position:relative;
    z-index:1;             /* заменить на background:gray; если плохо использовать z-index */

    text-align:center;
    margin:1ex;
    padding:0 2ex;
    border:6px dotted red;
    border-top:none;
}
div:after {
    content:'';
    position:absolute;
    top:-1000%;z-index:-1;      /* заменить top на top:100%; если нужно забрать z-index */
    bottom:-1000%;
    left:0;right:0;
    background:gray;            /* здесь устанавливаем фон колонки */

    border:3px solid white;
    border-top:none;
}