JSFiddle - React, Tailwind, and code Playground

by Wexcode

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
    <div class="table-container">
        <div class="table-row divOne">
            <div class="col-xs-3 divTwo">Some Text</div>
            <div class="col-xs-3">
                Some text that could wrap to multiple lines
            </div>
            <div class="col-xs-6"></div>
        </div>
    </div>
    <div class="row divOne">
        <div class="col-xs-3 divTwo">Different Text</div>
        <div class="col-xs-3 divThree">
            With some more text
        </div>
    </div>
</div>

CSS

.table-container {
    margin: 0 -15px;
}

.table-row {
    display: table;
    width: 100%;
}

.table-row [class^="col"] {
    display: table-cell;
    padding: 0 15px;
    float: none;
}

.divOne
{
    border-top:10px solid black;
}

.divTwo
{
    background-color: #32649b;
    height:100%;
    color:white;
}