JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<div class="container">
    <div class="ca ca-1">ca-1</div>
    <div class="ca ca-2">ca-2</div>
    <div class="ca ca-3">ca-3</div>
    <div class="ca ca-3">ca-3</div>
    <div class="ca ca-4">ca-4</div>
    <div class="ca ca-5">ca-5</div>
    <div class="ca ca-6">ca-6</div>
    <div class="ca ca-7">ca-7</div>
    <div class="ca ca-8">ca-8</div>
    <div class="ca ca-9">ca-9</div>
    <div class="ca ca-10">ca-10</div>
  </div>

CSS

.container{
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      box-sizing: border-box;
      height: 200px;
      width: 50%;
      border: 1px solid blue;
    }
    .ca{
      width: calc( 50% - 2px );
      border: 1px solid red;
      box-sizing: border-box;
    }
    .ca-1{
      height: 50px;
      width: 100%;
      border: 1px solid green;
    }