Edit in JSFiddle

<h1>The Pack Object</h1>

<div class="o-pack box">
    <p class="o-pack__item">One</p>
    <p class="o-pack__item">Two</p>
    <p class="o-pack__item">Three</p>
</div>

<div class="o-pack o-pack--full box">
    <p class="o-pack__item">One</p>
    <p class="o-pack__item">Two</p>
    <p class="o-pack__item">Three</p>
</div>

<h2>Justified variation</h2>

<div class="o-pack o-pack--justified box">
    <p class="o-pack__item">One</p>
    <p class="o-pack__item">Two</p>
    <p class="o-pack__item">Three</p>
</div>

/* ==========================================================================
   #PACK OBJECT
   ========================================================================== */


/**
 * The pack object lays elemnts in a row. The row should be as wide as the
 * parent.
 * Lining elements in a column rather than a row is handled by the STACK object.
 *
 * 1. Placeholder for elements that want the children to be the same height.
 * 2. Placeholder for elements that want the children to be the same width.
 * 3. 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.
 *    Make sure the a unit is included so that the calc() works.
 */

.o-pack {

    --o-pack-item-height: initial; /* [1] */
    --o-pack-item-width: initial; /* [2] */
    --o-pack-spacing: 0.5em;
    --o-pack-spacing-left: calc(var(--o-pack-spacing) / 2);
    --o-pack-spacing-right: calc(var(--o-pack-spacing) / 2);

    display: flex;
    flex-direction: row;
    width: 100%;

}

.o-pack__item {
    height: var(--o-pack-item-height);
    margin-left: var(--o-pack-spacing-left);
    margin-right: var(--o-pack-spacing-right);
    width: calc(
        var(--o-pack-item-width)
        - var(--o-pack-spacing-left)
        - var(--o-pack-spacing-right)
    );
}

.o-pack__item:first-child {
    --o-pack-spacing-left: 0px; /* [3] */
}

.o-pack__item:last-child {
    --o-pack-spacing-right: 0px; /* [3] */
}

.o-pack--full {
    --o-pack-item-width: calc(100% / 3);
}

.o-pack--justified {
    justify-content: space-between;
}


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

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

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