How to make CSS ROWS equal height? PURE CSS/HTML -

i have been looking through interwebs, particularly stackoverflow, find answer, i've not been able to. folks here have helped me solve "equal column height on row" - great, of content. but, whole different game, apparently.

i have site, basic css layout, top bar logo , nav, image container below it, , content footer.

in 'content area' have set 2 div classes, osection , esection (odd , even, clever, know). did each div have alternating background color visually break packets of content. however, these rows not of equal height. seem expand height of content contained within div. ideally, i'd each of these divs have same height, regardless of how content in div (i guess have tall (same height) largest div), want make sure each on own individual line, need equal height divs stacked on top of each other

i have tried using flexbox various properties, wasn't working expected to.

here css (snip)

.osection {    /*margin: 2% 0; */     background-color: #e6e6e6;    height: 50%;    padding-left: .5%;    padding-top: .5%;    padding-bottom: .5%;      }     .esection {   /* margin: 2% 0; */     background-color: #ffffff;    height: 50%;    padding-left: .5%;    padding-top: .5%;    padding-bottom: .5%;      } 

here html (snip)

<div class="osection">       <b>web design</b><br>       yada yada yada       </div>       <div class="esection">       <b>microsoft sharepoint</b><br>       yada yada yada<br>        </div>       <div class="osection">       <b>microsoft dynamics crm</b><br>         yad yada yada       </div>       <div class="esection">       <b>technology consulting</b><br>      yada yada yada       </div> 

edit requested, here screenshot showing mis-sized divs. want each of horizontal divs text in them (not header or footer, middle divs) same height, , continue stacked on top of each other now.

i think after this.

.container {    display: flex;    flex-direction: column;    height: 100vh;  }  .osection,  .esection {    flex: 1;  }  .osection {    background-color: #e6e6e6;  }  .esection {    background-color: #ffffff;  }

<div class="container">    <div class="osection"> <b>web design</b>        <br/>yada yada yada</div>    <div class="esection"> <b>microsoft sharepoint</b>      <br/>yada yada yada      <br/>      <br/>      <br/>yada yada yada      <br/>    </div>    <div class="osection"> <b>microsoft dynamics crm</b>        <br/>yad yada yada</div>    <div class="esection"> <b>technology consulting</b>        <br/>yada yada yada</div>  </div>