divの高さを揃えたい

cssのtableとtable-cellを使ってdivを横に並べ、さらに入れ子にしたdivの高さを揃えたいです。下のsnippetで、赤い枠線の高さを左側と右側で同じにしたい。
左側の高さは内側の要素によって変わるので、heightを明示的に指定することはできません。
JavaScriptを使用せずにcssのみで可能でしょうか？

.table {
  display: table;
  width: 100%;
}
.table > div {
  display: table-cell;
  width: 50%;
  padding: 10px;
  border: 1px solid #000;
}
.table > div > div {
  height: 100%;  /* 指定しても効果なし */
  padding: 10px;
  border: 1px solid #F00;
}

<div class="table">
    <div>
        <div>
            <p>左側</p>
            <p>左側</p>
            <p>左側</p>
         </div>
    </div>

    <div>
        <div>
            <p>右側</p>
        </div>
    </div>
</div>