JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <div class="cols">
        <div class="bg1"></div>
         <div class="col">1<br></div>
        <div class="bg2"></div>
         <div class="col">2<br>text text text text text text text text</div>
        <div class="bg3"></div>
         <div class="col">3<br></div>
        <div class="clear"></div>
    </div>
    <div class="text">text</div>
</div>

CSS

.content{
    margin:0px auto;
    width:614px;
}
.cols{
    width:612px;
    padding:1px;
    background:#ddd;
    position:relative;
}
.col{
    border:1px solid transparent;
    margin:1px;
    width:200px;
    position:relative;
    float:left;
    z-index:1;
}
.bg1,.bg2,.bg3{
    position:absolute;
    background:#bbb;
    z-index:0;
    width:202px;
}
.bg1{
    top:2px;
    left:2px;
    bottom:2px;
}
.bg2{
    top:2px;
    left:50%;
    margin-left:-101px;
    bottom:2px;
}
.bg3{
    top:2px;
    right:2px;
    bottom:2px;
}
.clear{
    clear:both;
}