Align H1 Header and Normal Text in Same Line

Question

I'm trying to have a H1 header and regular text on the same line, with a line under it, like so:

I have tried this, but have been unsuccessful

<div style="border-bottom:1px;">  <div align="left"><h1>Header</h1></div> <div align="right">Regular Text Goes Here</div> </div> 

What am I doing wrong?

Answer 1

Original answer (still working just fine)

See this CodePen.

The idea is to make the <h1> inline to allow the second text to be at the same line.

HTML:

<header>   <h1>Text</h1>   <span>text2</span> </header> 

CSS:

header { border-bottom: 1px solid #000; } header > h1 { display: inline-block; } header span { margin-left: 100px; } 

2020 Update

See this alternative CodePen that makes use of flexbox.

Instead of setting the h1 to an inline-block, you can make the header a flex container. A flex container will (by default) layout its children on a horizontal axis. Note that you also need align-items: center to keep the h1 and span on the same vertical axis.

Also, note that you might want align-items: baseline if you want the texts to appear on the same baseline (like my original answer).

header {   display: flex;   align-items: center;    /* Remove the next line if you want the span to appear next to the h1 */   justify-content: space-between;    border-bottom: 1px solid #000;   padding: 10px 30px; }