Align items baseline for multi-line text

Question

In a flex container, I have two bits of content. Both sides contain multiple lines of text. I wish to line up the baseline of the top lines of both sides. I've turned to align-items: baseline to achieve this, but unfortunately, it doesn't really produce the intended result. Sometimes the browser just plain doesn't seem to align them at all. You can see the different outcomes below:

Misaligned:

 <div style="display:flex;align-items:baseline"> <table> <tbody> <tr> <td>text</td> </tr> <tr> <td>text2</td> </tr> </tbody> </table> <div>text3</div> </div> 

Top:

 <div style="display:flex;align-items:baseline"> <div> <div>text</div> <div>text2</div> </div> <div>text3</div> </div> 

Ideally, I'd like to be able to simply indicate the elements containing the text whose baseline I wish to align. But I would probably settle for any solution that always aligns the baseline of the top line of the text on each side.

Currently, I don't use align-items: baseline and I simply throw on a magic amount of padding to make them align, which is less than ideal. How can I make the browser align them for me?

Answer 1

The problem is that table cells have vertical-align: middle by default .

Therefore, you should switch it to baseline :

 #wrapper { display: flex; align-items: baseline; } td { vertical-align: baseline; } /* Some additional styles to display the baseline: */ td { font-size: 200%; } #wrapper:after { content: ''; position: absolute; left: 0; right: 0; border-top: 1px solid red; } 

 <div id="wrapper"> <table> <tr><td>text</td></tr> <tr><td>text2</td></tr> </table> <div>text3</div> </div>