JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
Example 1:
<div class="ex_wrapper">
    <div class="ex_1_row row">
        <div class="ex_1_key col-xs-6">Some Content</div>
        <div class="ex_1_val col-xs-6">Lots of content that causes a wrap</div>
    </div>
        <div class="ex_1_row row">
        <div class="ex_1_key col-xs-6">Another Header</div>
        <div class="ex_1_val col-xs-6"></div>
    </div>
</div>
<br />
Example 2:
<div class="ex_wrapper">
    <div class="ex_2_row row">
        <div class="ex_2_key col-xs-6">Some Content</div>
        <div class="ex_2_val col-xs-6">Lots of content that causes a wrap</div>
    </div>
    <div class="ex_2_row row">
        <div class="ex_2_key col-xs-6">Another Header</div>
        <div class="ex_2_val col-xs-6"></div>
    </div>
</div>

CSS

/** Example 1 would just have the key highlight in grey **/
.ex_1_key {
    background-color: lightgrey;
    height: 100%;    /** notice the 100% doesn't seem to work **/
}

/** Example 2 colors the whole row, and covers things in white **/
.ex_2_row {
    background-color: lightgrey;
    overflow: hidden;
}

.ex_2_val {
    background-color: white;
    padding-bottom:5000px;
    margin-bottom:-5000px;
}

/** Ignore this, just for examples **/
.ex_wrapper {
    width: 250px;
    border: 1px dashed grey;
}
/** ----------------------------- **/