Uses display:flex; to reorganize content on smaller devices.
body { padding:0 60px; font-size: 21px; }
.title { border-bottom: 1px solid #ccc; max-width: 500px; margin: 40px auto; }
.title-note { font-size: 60%; color: #999; }
.flex-title {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
}
.flex-title > span {
white-space: nowrap;
}
.flex-title .title-main {
flex-grow: 1;
}
>
<div class="title flex-title">Main Title Here <span class="title-note">This is a good look, right here.</span></div>
