CSS: Canh Hai Column Có Chiều Cao Bằng Nhau Và Bằng Parent (Make Two Columns Equal Height And Fit With Parent)

Bên dưới là một số cách mà ta có thể canh hai column luôn có chiều cao bằng nhau dù cho content của hai column có thể không bằng nhau.

Ta có hai column(trái và phải) và ta mong muốn 2 column này luôn có chiều cao bằng nhau và luôn bằng parent chiều cao của parent có thể thay đổi như ví dụ hình bên dưới.

1. Ta dùng flex để giải quyết 
HTML

<div class="parent">
  <div class="col-left">
    col-left line col-left line  col-left line <br/>
    col-left line <br/>
    col-left line
  </div>
  <div class="col-right">col-right</div>
</div>

CSS

.parent {
  padding: 10px;
  background: yellow;
  display: flex;
  color: white;
}
.col-left {
  background: red;
  flex: 1;
}
.col-right {
  background: green;
  flex: 1;
}

2. Ta có thể dùng display-table để làm
HTML

<div class="padding-wrapper">
    <div class="parent-wrapper">
        <div class="parent">
            <div class="col-left">
                col-left line col-left line  col-left line <br/>
                col-left line <br/>
                col-left line
            </div>
            <div class="col-right">col-right</div>
        </div>
    </div>
</div>

CSS

.padding-wrapper {
  background: yellow;
  padding: 10px;
}
.parent-wrapper {
   display: table;
   width: 100%;
}
.parent {
  display: table-row;
  color: white;
}
.col-left {
  background: red;
  display: table-cell;
  height: 100%;
  width: 50%;
}
.col-right {
  background: green;
  display: table-cell;
  width: 50%;
}

3. Ta có thể dùng table trong html
HTML

<div class="padding-wrapper">
    <table>
        <tr>
            <td class="col-left">
                col-left line col-left line <br/> col-left line 
                <br/>
                col-left line 
            </td>
            <td class="col-right">
                col-right
            </td>
        </tr>
    </table>
</div>

CSS

.padding-wrapper {
  padding: 10px;
  background: yellow;
  color: white;
}
table {
  width: 100%;
  border-collapse: collapse;
}
td {
  vertical-align: top;
}
.col-left {
  background: red;
  width: 50%;
}
.col-right {
  background: green;
  width: 50%;
}