Проблема с шириной для контейнеров с одинаковой высотой

Question

Моя цель состоит в том, чтобы иметь 2 контейнера с каждой шириной 50%, и если количество текста в одном из них больше, чем у другого, то обе имеют ту же высоту, что и контейнер с более длинным текстом , Не могли бы вы рассказать мне, почему ширина 50% не применяется в моем коде?

css: .wrapper-container { padding: 32px; }

.display__table { 
    width: 100%; 
    display: table; 
} 

.display-table__row{ 
    display: table-row; 
} 

.themeTile{ 
    display: table-cell; 
    position: relative; 
    float: none; 
    border-bottom: 1px solid gray; 
    width: calc(50% - 2rem); 
} 

.themeTile:nth-child(odd){ 
    padding-right: 2rem; 
} 


.themeTextContainerWide{ 
    width: calc(100% - 90px); 
float: left; 
} 

.themeTextContainer{ 
    width: calc(100% - 280px); 
    float: left; 
} 

.theme-image-container{ 
    width: 280px; 
    float: left; 
position: relative; 
} 

HTML:

<div class="wrapper-container"> 

<div class="display__table"> 
<div class="display-table__row"> 
    <div class="themeTile"> 
    <h3>Digital Infrastructure</h3> 

    <div> 
     <img src="http://placehold.it/90x90"> 

     <div class="themeTextContainerWide"> 
     <p> 
      Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique 
      percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. 
     </p> 
     <a> 
      Call to Action 
     </a> 
     </div> 

    </div> 
    <div> 

     <div class="theme-image-container"> 
     <picture> 
      <source srcset="http://placehold.it/280x170" media="(min-width: 769px)"> 
      <source srcset="http://placehold.it/280x170" media="(min-width: 641px)"> 
      <source srcset="http://placehold.it/320x290" media="(min-width: 320px)"> 
      <img class="position-float__left" srcset="http://placehold.it/320x290"> 
     </picture> 

     </div> 

     <div class="themeTextContainer"> 
     <p>Case Study</p> 
     <h5>title</h5> 

     <p> 
      Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. 
     </p> 
     <a> 
      Call to action 
     </a> 
     <span>(PDF 10,00 MB)</span> 
     </div> 
    </div> 

    </div> 
    <div class="themeTile"> 
    <h3>Digital Infrastructure</h3> 

    <div> 
     <img src="http://placehold.it/90x90"> 

     <div class="themeTextContainerWide"> 
     <p> 
      Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique 
      percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. 
     </p> 
     <a> 
      Call to Action 
     </a> 
     </div> 

    </div> 
    <div> 

     <div class="theme-image-container"> 
     <picture> 
      <source srcset="http://placehold.it/280x170" media="(min-width: 769px)"> 
      <source srcset="http://placehold.it/280x170" media="(min-width: 641px)"> 
      <source srcset="http://placehold.it/320x290" media="(min-width: 320px)"> 
      <img srcset="http://placehold.it/320x290"> 
     </picture> 

     </div> 

     <div class="themeTextContainer"> 
     <p>Case Study</p> 
     <h5>title</h5> 

     <p> 
      Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.    Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.    Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.    Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.    Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. 
     </p> 
     <a> 
      Call to action 
     </a> 
     <span>(PDF 10,00 MB)</span> 
     </div> 
    </div> 

    </div> 
</div> 

http://codepen.io/neginbasiri/pen/qZergG

Answer 1

Заменить:

.display-table__row{ 
    display: table-row; 
} 

С:

.display-table__row { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 

Тогда ваша ширина будет работать хорошо!

Answer 2

Отредактированный код для вас:

.wrapper-container{ 
    padding: 32px; 
} 

.display__table { 
    width: 100%; 
    display: table; 
} 

.display-table__row{ 
    display: flex; 
    //margin:0 -0.9375rem; 
} 

.themeTile{ 
    display: table-cell; 
    position: relative; 
    float: none; 
    border-bottom: 1px solid gray; 
    width: calc(50% - 2rem); 
// width:50%; 
    // padding-left: 0.9375rem; 
// padding-right: 0.9375rem; 
} 

.themeTile:nth-child(odd){ 
    //padding-right: 2rem; 
} 


.themeTextContainerWide{ 
    width: calc(100% - 90px); 
    float: left; 
} 

.themeTextContainer{ 
    width: calc(100% - 280px); 
    float: left; 
} 

.theme-image-container{ 
    width: 280px; 
    float: left; 
    position: relative; 
} 

Answer 3

Изменен display селектор родительского класса

.display-table__row{ 
display: -ms-flexbox; 
display: -webkit-flex; 
} 

Здесь работает Demo