JSFiddle - React, Tailwind, and code Playground

by OliverJAsh2

HTML

<h2>items use padding</h2>
<div class="test padding">
    <div class="container1">
        <div class="item1">
            <div class="container2">
                <div class="item2">foo1a</div>
                <div class="item2">foo1b</div>
            </div>
        </div>
        <div class="item1">
            <div class="container2">
                <div class="item2">foo2a</div>
                <div class="item2">foo2b</div>
            </div>
        </div>
    </div>
</div>
<body>
<h2>items use margin</h2>
<div class="test margin">
    <div class="container1">
        <div class="item1">
            <div class="container2">
                <div class="item2">foo1a</div>
                <div class="item2">foo1b</div>
            </div>
        </div>
        <div class="item1">
            <div class="container2">
                <div class="item2">foo2a</div>
                <div class="item2">foo2b</div>
            </div>
        </div>
    </div>
</div>

CSS

.test {
    border: 1px solid;
}

.container1 {
    margin-top: -20px;
}

.margin .item1 {
    margin-top: 20px;
}

.padding .item1 {
    padding-top: 20px;
}

.container2 {
    margin-top: -20px;
}

.margin .item2 {
    margin-top: 20px;
}

.padding .item2 {
    padding-top: 20px;
}