JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<div class="container-fluid no-padding">
    <div id="my-row" class="row">
        <div class="col-sm-4 panel" style="background-color: red">
            <h4 class="white light" style="margin-top:0px; padding: 20px 0px 0px 20px; float: left;">WHAT WE GROW</h4>
        </div>
        <div class="col-sm-4 panel " style="background-color: yellow ">
        </div>
        <div class="col-sm-4 panel " style="background-color: blue ">
            <h4 class="white light " style="margin-top:0px; padding: 20px 20px 0px 0px; float: right; color: pink; ">SIGN UP FREE</h4>
        </div>
    </div>
</div>

CSS

#my-row {
    display: table;
    height:20%;
    width:100%;
    margin:0;
}

#my-row .panel {
    float: none;
    display: table-cell;
    vertical-align: top;
}

.no-padding {
  padding:0!important;
}