positioning two elements inside a parent to be the same height

Question

I have 2 divs which I need to position inside the containing div they need to be both the same height no matter what content goes in either of them, so they need to take the height of the tallest one hence the absolutes and top bottom set to 0, currently the container div #three collapses and hides the two thumb divs content.

section#three {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    padding: 70px 0px 70px 0px;
    position: relative;
}

section#three div.thumb-container {
    width: 40%;
    top: 0;
    bottom: 0;
    position: absolute;
    clear: both;
}

section#three div#left-thumb-container {
    left: 5%;
}

section#three div#right-thumb-container {
    right: 5%;
}

<section id="three">
    <div class="thumb-container" id="left-thumb-container">
        content will be here to expand the divs
    </div>

    <div class="thumb-container" id="right-thumb-container">
        content will be here to expand the divs
    </div>
</section>

Answer 1

I will recommend to use flexbox to solve this issue. https://codepen.io/imohkay/pen/gpard You can see example there.

#three {
  display: flex;
}

.thumb-container {
  background: gray;
  border-left: 1px solid #fff;
  flex: 1 0;
  padding: 30px;
}

<section id="three">
    <div class="thumb-container" id="left-thumb-container">
        content will be here to expand the divs
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente beatae nulla earum error reiciendis molestias praesentium, doloribus esse provident harum illum, voluptate vero ratione unde fugit repellendus laboriosam ad officiis.</p>
    </div>

    <div class="thumb-container" id="right-thumb-container">
        content will be here to expand the divs
    </div>
</section>