JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid-container outline">
    <div class="row">
        <div class="col-4 vertical-container ">
            <h2>Hello</h2>
        </div>
        <div class="col-2 vertical-container " >
            <span class="blah">blah</span>
        </div>
    </div>
</div>

CSS

.grid-container {
        width: 100%;
        max-width: 1200px;
    }
    /*-- our cleafix hack -- */
    .row:before, .row:after {
        content:"";
        display: table;
        clear:both;
    }
    [class*='col-'] {
        float: left;
        min-height: 1px;
        width: 16.66%;
        /*-- our gutter -- */
        padding: 12px;
    
    }
    .col-1 {
        width: 16.66%;
    }
    .col-2 {
        width: 33.33%;
    }
    .col-3 {
        width: 50%;
    }
    .col-4 {
        width: 66.66%;
    }
    .col-5 {
        width: 83.33%;
    }
    .col-6 {
        width: 100%;
    }
    .outline, .outline * {
        outline: 1px solid #F6A1A1;
    }
    /*-- some extra column content styling --*/
    [class*='col-'] > p {
    
        padding: 0;
        margin: 0;
        text-align: center;
        color: white;
    }
div {
    box-sizing:border-box;
}
h2{
    margin:0px;
}
.vertical-container {
  height: 60px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}