Edit in JSFiddle

<h1>The Stack Object</h1>

<div class="o-stack box">
    <p class="o-stack__item">One</p>
</div>
<div class="o-stack box">
    <p class="o-stack__item">One</p>
    <p class="o-stack__item">Two</p>
</div>
<div class="o-stack box">
    <p class="o-stack__item">One</p>
    <p class="o-stack__item">Two</p>
    <p class="o-stack__item">Three</p>
</div>

<h2>Heighted variant</h2>

<div class="o-stack o-stack--height box">
    <p class="o-stack__item">One</p>
    <p class="o-stack__item">Two</p>
    <p class="o-stack__item">Three</p>
</div>
/* ==========================================================================
   #STACK OBJECT
   ========================================================================== */


/**
 * The stack object is the vertical variant of the pack object.
 *
 * 1. Placeholder for elements that want the children to be the same height.
 * 2. Remove the margins from :first-child and :last-child rather than using
 *    the :not() selector to apply the margins so that a selector as strong as a
 *    single class can override it.
 */

.o-stack {

    --o-stack-item-height: initial; /* [1] */
    --o-stack-spacing: 0.5em;

    display: flex;
    flex-direction: column;

}

.o-stack__item {
    height: var(--o-stack-item-height);
    margin-bottom: var(--o-stack-spacing);
}

.o-stack__item:last-child {
    --o-stack-spacing: 0px; /* [2] */
}

.o-stack--height {
    --o-stack-item-height: 100px;
}


/* ==========================================================================
   #PAGE STYLES
   ========================================================================== */
p {
    margin: 0;
}

.box {
    border: 1px solid #000;
    margin-bottom: 1em;
}

.box > p {
    background-color: pink;
}