<div flex flex-wrap>
    <div margin-bottom-small flex-basis-25>Looks like I might have re-invented tailwind.</div>
    <div margin-bottom-small flex-basis-25>Fugiat rerum placeat porro corporis culpa. Fugit blanditiis quam neque laudantium exercitationem provident rem
      perferendis magnam sapiente vero consequatur, porro, voluptas reprehenderit aut molestias accusamus, quod
      deleniti. Praesentium, libero molestias!</div>
    <div margin-bottom-small flex-basis-25>Labore facilis dolorum illo atque culpa officia architecto reiciendis ducimus eos a, neque voluptatum
      repellendus incidunt! Reiciendis, quas mollitia, aspernatur autem sed error nesciunt eum maiores ex nemo hic aut.
    </div>
    <div margin-bottom-small flex-basis-25>Nihil hic nisi repudiandae delectus aliquid in, deserunt iusto dolore natus adipisci blanditiis totam, placeat
      reiciendis atque ad? Doloribus ipsa corporis earum nam qui, quae fuga. Id perspiciatis quos delectus.</div>
    <div margin-bottom-small flex-basis-25>Dignissimos nostrum omnis nulla qui nobis maiores officiis minima, deserunt facilis reprehenderit at laudantium
      blanditiis itaque vero illum excepturi ipsam in nisi optio beatae voluptatum iusto? Dolorem delectus reiciendis
      illo?</div>
    <div margin-bottom-small flex-basis-25>Praesentium eligendi assumenda, iste incidunt nisi maxime dicta reiciendis, numquam adipisci minus odit, optio
      enim facere iure id ipsum quasi sed dolorum ducimus nemo dolores vitae ratione. Suscipit, labore ad!</div>
    <div margin-bottom-small flex-basis-25>Porro dolorum corrupti fuga molestias sint libero ipsum nihil totam, enim consequuntur? Sint minus sed quod
      modi quo minima nisi maxime nobis tempore, ex officia at labore? Ipsum, eos ipsam?</div>
    <div margin-bottom-small flex-basis-25>Quae nam, distinctio quasi quidem adipisci quam possimus laborum nobis consectetur, animi, velit in maiores
      perferendis voluptatibus nihil? Autem, nulla expedita maiores quae qui nemo illum sed exercitationem ratione
      tenetur.</div>
    <div margin-bottom-small flex-basis-25>Culpa consequuntur cupiditate architecto quae rem suscipit porro quibusdam fugit natus voluptatum placeat vitae
      sequi sunt nulla atque dolore officia, dolor sint quasi, commodi in ipsum repudiandae, unde laboriosam. Quis?
    </div>
    <div>Accusamus minus beatae magni iste deleniti impedit! Necessitatibus tenetur recusandae doloremque ea ducimus
      quisquam esse amet explicabo voluptas, provident repudiandae optio consequatur eius fuga neque suscipit totam
      rerum, saepe deserunt?</div>
  </div>
[flex] {
  display: flex;
}

[flex-wrap] {
  flex-wrap: wrap;
}

[flex-basis-25] {
  flex-basis: 25%;
}

[margin-bottom-small] {
  margin-bottom: 1.5rem;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.