aligning cells in a flexbox layout

by yannick1976

HTML

<div class="myTable">
  <div class="myRow">
    <div class="myCell">ROW 1, CELL 1</div>
    <div class="myCell">ROW 1, CELL 2</div>
    <div class="myCell">ROW 1, CELL 3</div>
  </div>
  <div class="myRow">
    <div class="myCell">A LONGER CELL</div>
    <div class="myCell">ROW 2, CELL 2</div>
    <div class="myCell">ROW 2, CELL 3</div>
  </div>
</div>

CSS

.myCell {
    border: solid black 1px;
    padding: 10px;
  }
  .myTable {
    display: flex;
    flex-direction: column;
  }
  .myRow {
    display: flex;
    flex-direction: row;
  }