What does this code display?

Two flex items on the same rowOne flex item on the first row, followed by another below it<html> <head> <style>.container { border: solid 2px #806868; display: flex; height: 100px; } .item { border: 2px solid #457081; margin: 10px; }</style> </head> <body> <div class="container"> <button class="item">Button</button> <em class="item">Heading</em> </div> </body> </html>]]>

Two flex items on the same row.