JSFiddle - React, Tailwind, and code Playground

by skulptron

HTML

<div class="section">
    <div class="article">Someething A fggfdg gfgfg gfdg gfdgfdg gfdg gfdgfdgf gfdg gfdgfg gfdg gfdg fdgfdg gfdg gfdg gfdg gfgfgfgfg gfdg gfdgfdg gfdthing</div>
    <div class="article">Something B</div>
    <div class="article">Someething C fggfdg gfgfg gfdg gfdgfdg gfdg gfdgfdgf gfdg gfdgfg gfdg gfdg fdgfdg gfdg gfdg gfdg gfgfgfgfg gfdg gfdgfdg gfdethingb fggfdg gfgfg gfdg gfdgfdg gfdg gfdgfdgf gfdg gfdgfg gfdg gfdg fdgfdg gfdg gfdg gfdg gfgfgfgfg gfdg gfdgfdg gfdthing</div>
    <div class="article">Someething D gfdg fdgfdg gfdg gfdg gfdg gfgfgfgfg gfdg gfdgfdg gfdhing</div>
    <div class="article">Something E</div>
    <div class="article">Sometethingb fggfdg gfgfg gfdg gfdgfdg gfdg gfdgfdgf gfdg gfdgfg gfdg gfdg fdgfdg gfdg gfdg gfdg gfgfgfgfg gfdg gfdgfdg gfdhing</div>
    <div class="article">Something F</div>
    <div class="article">Sometething G  fggfdg gfgfg gfdg gfdg fdgfdg gfdg gfdg gfdg gfgfgfgfg gfdg gfdgfdg gfdhing</div>
</div>

CSS

.section {
    border :3px solid red;
    width:100%;
    
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.article {
    width:300px;
    border:2px solid green;
    margin: 5px 5px 5px 5px;

    flex-grow: 1;
}