How to use display: table to get the same row heights in firefox as in chrome and edge

Question

I recreated problem in JSFiddle here https://jsfiddle.net/PainKKKiller/zhzejexq/ I've tested it in Chrome and MS Edge, and there it works as I want, but Firefox give ugly result ( cells height too big). Here the code from fiddle:

html

    <section class="about">
           <h2>About Us</h2>
           <h3>Proin iaculis purus consequat sem cure.</h3>
            <div class="about-content">
                <div class="about-row">
                    <div class="about-cell cell-left">
                        <h2>July 2010 <br>
                        Our Humble Beginnings
                       </h2>
                   <p>Proin iaculis purus consequat sem cure
digni ssim. Donec porttitora entum suscipit
aenean rhoncus posuere odio in tincidunt. Proin
iaculis purus consequat sem cure digni
ssim. Donec porttitora entum suscipit.</p>
                    </div>
                    <div class="about-cell cell-right"></div>
                </div>
                <div class="about-row">
                    <div class="about-cell cell-left"></div>
                    <div class="about-cell cell-right">
                        <h2>January 2011 <br>
Facing Startup Battles</h2>
                   <p>Proin iaculis purus consequat sem cure
digni ssim. Donec porttitora entum suscipit
aenean rhoncus posuere odio in tincidunt. Proin
iaculis purus consequat sem cure digni
ssim. Donec porttitora entum suscipit aenean
rhoncus posuere odio in tincidunt.</p>
                    </div>
                </div>
                <div class="about-row">
                    <div class="about-cell cell-left">
                        <h2>December 2012 <br>
Enter The Dark Days</h2>
                   <p>Proin iaculis purus consequat sem cure
digni ssim. Donec porttitora entum suscipit
aenean rhoncus posuere odio in tincidunt. Proin
iaculis purus consequat sem cure digni.</p>
                    </div>
                    <div class="about-cell cell-right"></div>
                </div>
                <div class="about-row">
                    <div class="about-cell cell-left">
                    </div>
                    <div class="about-cell cell-right">
                        <h2>February 2014 <br>
Our Triumph</h2>
                   <p>Proin iaculis purus consequat sem cure
digni ssim. Donec porttitora entum suscipit
aenean rhoncus posuere odio in tincidunt. Proin
iaculis purus consequat sem cure digni
ssim. Donec porttitora entum suscipit aenean.</p>
                    </div>
                </div>
                <div class="about-row">
                    <div class="about-cell cell-left no-border">
                    </div>
                    <div class="about-cell cell-right"></div>
                </div>
            </div>
        </section>

css

 .about {
    width: 100%;
    height: 1660px;
    background-color: white;
    padding: 45px;
    box-sizing: border-box;
}

.about h2 {
    font-family: Montserrat;
    color:  #222222;
    font-size: 40px;
    font-weight: 700;
    line-height: 75px;
    text-align: center;
    margin-bottom: 0;
    text-transform: uppercase;
}

.about h3 {
    font-family: DroidSerif;
    color:  #777777;
    font-size: 16px;
    font-style: italic;
    text-align: center;
    margin-top: 0;
    margin-bottom: 60px;
}

.about-content {
    margin: 0 auto;
    width: 875px;
    display: table;
}

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

.about-cell {
  width: 437.5px;
  height: 300px;
  background: white;
  display: table-cell;
  box-sizing: border-box;
  position: relative;
  vertical-align:middle;
}

.about-cell h2 {
    font-family: Montserrat;
    color:  #222222;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
}

.about-cell p {
    font-family: RobotoSlab;
    color:  #777777;
    font-size: 14px;
    font-weight: 400;
}

.cell-left {
    border-right: 3px solid #f1f1f1;
    padding-right: 128px;
    text-align: right;
}

.cell-left h2 {
    text-align: right;
}

/*.cell-left img {
    position: absolute;
    top: 0;
    right: -93px;
    z-index: 999;
}*/

.cell-right {
    padding-left: 128px;
    text-align: left;
}

.cell-right h2 {
    text-align: left;
}

.no-border {
    border-right: 0;
}

P.S. cells have position relative because in oroginal design I need to place image in center of table (in center of vertical line) in every row

Answer 1

You can fix it be setting the content of the empty cells to  .

If will force the cells to have content and firefox will need to obey to the height: 300px definition you have there.

Here is the update to your jsfiddle:
https://jsfiddle.net/sswfnebe/