CSS:: Essayer d'obtenir des hauteurs de sections/divs pour correspondre .... un sans un img

Question

J'ai un problème où j'ai une rangée sur mon site et les deux tiers sont une image de fond avec le texte sur le dessus de il. L'autre tiers est juste une image. Donc deux sections ou divs. J'essaie de faire correspondre les hauteurs de sorte que, quelle que soit la hauteur de la div sur la droite, la div à gauche est la même. Voici mes CodePen: http://codepen.io/anon/pen/zvpgBz

Voici mon condensé HTML:

<a href="#" title="" class="feature-link"> 
    <section id="feature1" class="feature" style="background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.35)), url(https://thecleverroot.com/wp-content/uploads/header-marigold-and-mint-flower-shop.jpg) no-repeat top center!important; background-size: cover!important;"> 
    <section class="feature-caption"><p class="category-link">Farm/Ranch</p><h2>Katherine Anderson </h2><p>Owner of Marigold and Mint, Seattle, WA</p><p class="read-more">Read</p></section></section> 
</a> 
<section class="feature-third"> 
    <a href="#" title=""> 
     <img src="https://thecleverroot.com/wp-content/uploads/cover-fall-2015.jpg" alt=""> 
    </a> 
</section> 

Et le CSS:

.feature { position: relative; float: left; clear: both; width: 66.66%; color: #FFF; } 
a.feature-link { text-decoration: none; } 
.feature-third { position: relative; float: left; width: 33.333%; color: #FFF; overflow: hidden; display: block; } 
.feature a, .feature-third a { color: #FFF; text-decoration: none; } 
.feature-caption h2 { font-size: 64px; line-height: .75em; margin: .25em 0; } 
.category-link a { 
    color: #fff; 
    text-decoration: none; 
} 
.category-link a:hover, .category-link a:focus, .category-link a:active { 
    color: #fcfcfc; 
} 
.read-more { 
    background: #000; 
    border-radius: 10px; 
    display: inline-block; 
    margin: 0; 
    padding: 0 20px; 
    min-width: 90px; 
    height: 45px; 
    line-height: 45px; 
    color: #FFF; 
    font-size: 18px; 
    text-align: center; 
    font-weight: 400; 
    text-transform: uppercase; 
} 

Answer 1

Ici vous allez! http://codepen.io/LeeKevin/pen/QjQgJP

Un résumé des changements:

1) Ajout d'un conteneur:

HTML

<div class="header-container"> 

CSS

.header-container { 
    display: flex; 
} 

2) Ajout flexbox styles aux règles existantes:

.feature { 
    flex: 1; 
    position: relative; 
    float: left; 
    clear: both; 
    color: #FFF; 
    width: 100%; 
} 

a.feature-link { 
    flex: 1; 
    display: flex; 
    width: 66.66%; 
    text-decoration: none; 
    position: relative; 
}