table-cell border not extending to row height

Question

I am using display:table-cell to show a calendar display.

When I have a single day that contains lots of text the square is bigger than the rest of the squares on that row, However the other divs on the row do not extend their border to match the new height.

Am I doing something wrong here ?

See plunker:

  https://plnkr.co/edit/sUHLvFnbQv6qpXNZkG0J

.calendar-week-container {
  display: table;
  width:100%; 
}
.row-container {
  display: table-row;
  width:100%; 
}
.calendar-day{
    display: table-cell;
    min-height:50px;
    float:left;
    width:20%;
    
    border-top:1px solid red;
    border-left:1px solid red;
}

    <div class="calendar-week-container">
      <div class="row-container">
          <div class="calendar-day">
            My Day 1
          </div>
          <div class="calendar-day">
            My Day 2
             <br>
            asdasd
            <br>
            asdasdads <br>
            asdasd
            <br>
            asdasdads
          </div>
                <div class="calendar-day">
            My Day 3
          </div>
          <div class="calendar-day">
            My Day 4
           
          </div>
        </div>
      <div class="row-container">
                <div class="calendar-day">
            My Day 5
          </div>
                <div class="calendar-day">
            My Day 6
          </div>
                <div class="calendar-day">
            My Day 7
          </div>
                <div class="calendar-day">
            My Day 8
          </div>
        </div>
        </div>

Answer 1

Remove the float on the "cell" divs - not sure why that is there in a table layout.

.calendar-week-container {
  display: table;
  width:100%; 
}
.row-container {
  display: table-row;
  width:100%; 
}
.calendar-day{
    display: table-cell;
    min-height:50px;
    width:20%;
    
    border-top:1px solid red;
    border-left:1px solid red;
}

    <div class="calendar-week-container">
      <div class="row-container">
          <div class="calendar-day">
            My Day 1
          </div>
          <div class="calendar-day">
            My Day 2
             <br>
            asdasd
            <br>
            asdasdads <br>
            asdasd
            <br>
            asdasdads
          </div>
                <div class="calendar-day">
            My Day 3
          </div>
          <div class="calendar-day">
            My Day 4
           
          </div>
        </div>
      <div class="row-container">
                <div class="calendar-day">
            My Day 5
          </div>
                <div class="calendar-day">
            My Day 6
          </div>
                <div class="calendar-day">
            My Day 7
          </div>
                <div class="calendar-day">
            My Day 8
          </div>
        </div>
        </div>