JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="wrapper">
    <div class="thing removable">
        <span>Lorem</span>
    </div>
    <div class="thing removable">
        <h2>Item 2</h2>
        <img src="https://dummyimage.com/600x500/45af77/ffffff.png&text=BG+IMG" alt="">
        <p>Quos dolorem, repellendus accusamus ipsa impedit cupiditate. Debitis nostrum ad aspernatur odio magni, laborum quos?</p>
    </div>
    <div class="thing removable">
        <h2>Item 3</h2>
        <p>Deleniti dolor sit magnam! Quae quas odit maiores, nulla fugiat molestiae necessitatibus vel hic maxime!</p>
    </div>
    <div class="thing removable">
        <h2>Item 4</h2>
        <p>Maiores eligendi magni aut, explicabo sint. Omnis ad vero quo molestiae unde ipsam voluptas quos.</p>
    </div>
    <div class="thing removable">
        <h2>Item 5</h2>
        <p>Accusantium, ipsum, nemo. Rem id officiis iure aspernatur excepturi sed, necessitatibus quo minima maiores assumenda!</p>
    </div>
</div>

SCSS

* {
    box-sizing: border-box;
}
.wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    
    .thing {
        padding: 0 1rem;
        background: #fcf;
        flex-basis: calc(50% - 2rem);
        min-width: 0;
    }
}

JavaScript

$('.removable').click(function(evt) { $(evt.currentTarget).remove(); });