JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="fooContainer">
        <div class="fooPad">
            <div class="foo">content</div>
        </div>
    </div
    ><div class="fooContainer">
        <div class="fooPad">
            <div class="foo">bit more content</div>
        </div>
    </div
    ><div class="fooContainer">
        <div class="fooPad">
            <div class="foo">Very much more content</div>
        </div>
    </div>
</div>

CSS

.container{
    width: 95%;
    margin: 0 auto;
    border: 2px solid black;
    padding: 10px 0;
}
.foo {
    background-color:red;
    height: 100px;
    padding: 10px;
}
.fooContainer {
    width: 33.33%;
    display: inline-block;
    vertical-align: top;
}

.fooPad{
    padding:0 8px;
}
.fooContainer:first-child .fooPad {
    padding-left: 0;
}
.fooContainer:last-child .fooPad{
    padding-right: 0;
}