Flex word wrap?

  css3, question

Question 1. flex layout, why did it wrap? Question 2: How to write the layout gracefully (the layout below)

Ps: On the left is a string of words and on the right is a similar line segment. The left word has no fixed width

clipboard.png

The above image is ui. The following figure is html.

clipboard.png

<!  DOCTYPE html>
 <html>
 
 <head>
 <title></title>
 <meta charset="utf-8">
 <style type="text/css">
 
 
 .itemHeader{
 display: flex;
 align-items:baseline;
 }
 .itemHeader div:first-child{
 /*display: inline-block;  */
 margin-right: 2em;
 
 }
 .itemHeader div:last-child{
 border-bottom:1px solid #000;
 /*display: inline-block;  */
 width: 100%;
 }
 </style>
 </head>
 
 <body>
 
 < div class="itemHeader"><div > building drawings < /div><div></div></div >
 </body>
 
 </html>

width: 100%;changeflex:1To allow the segment to occupy the remaining width.