Width issue for containers with the same height

Question

My goal is to have 2 containers each 50% width and if the amount of text in one of those is more than the other one then both have the same height as the container with longer text. Can you please tell me why the 50% width is not applied in my code?

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

Replace:

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

With:

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

Then your width will work good!

Answer 2

Changed the display selector of parent class

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

Here is the working Demo

Answer 3

Edited code for you:

.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;
}