html - Set baseline of flexbox elements -

consider html

<div class="container">   <div class="element">     <div class="top">       <div>a</div>       <div>b</div>     </div>     <hr/>     <div class="bottom">       <div>c</div>     </div>   </div>   <div class="element">     <div class="top">       <div>a</div>     </div>     <hr/>     <div class="bottom">       <div>b</div>       <div>c</div>     </div>   </div>     <div class="element">     <div class="top">       <div>a</div>     </div>     <hr/>     <div class="bottom">       <div>b</div>     </div>   </div> </div> 

i want line elements horizontally using flexbox, such horizontal rules align. seems align-items: baseline right thing – if make sure element divs have baseline @ horizontal bar.

see this codepen link play around with.

how can control baseline of such block element?

you use multiple stacked flexboxes achieve this, html gets more complex, looks way pretend set baseline yourself.

demo : https://jsfiddle.net/paf_sebastien/tlk1jajo/

the content on line in 1 flexbox :

.overline {     align-items: flex-end; } 

the content under line in :

.underline {     align-items: flex-start; }