CSS3 | Type: CSSFlexible Content

Uses display:flex; to reorganize content on smaller devices.

<style>
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;
  }
</style>

<div class="title flex-title"> <span class="title-main">Main Title Here</span> <span class="title-note">This is a good look, right here.</span> </div>