JSFiddle - React, Tailwind, and code Playground

HTML

<h3 class="title abs-title">
  <span class="title-main">Main Title Here</span>
  <span class="title-note">This is absolutely positioned.</span>
</h3>

<h3 class="title float-title">
  <span class="title-main">Main Title Here</span>
  <span class="title-note">This subtitle is floated.</span>
</h3>

<h3 class="title table-title">
  <span class="title-main">Main Title Here</span>
  <span class="title-note">I am a table cell.</span>
</h3>

<h3 class="title flex-title">
  <span class="title-main">Main Title Here</span>
  <span class="title-note">This is a good look, right fdsfsfsdfdsfdsfdsfdsfdsfdsfds fsdf fsdfds fsdfshere.</span>
</h3>

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

CSS

body {
    padding: 100px;
    font-size: 21px;
}

.title {
    border-bottom: 1px solid #ccc;
    max-width: 500px;
    margin: 40px auto;
}
.title-note {
    font-size: 60%;
    color: #999;
}

.abs-title {
    position: relative;
}

.abs-title .title-note {
    position: absolute;
    bottom: 2px;
    right: 0;
}

.float-title .title-note {
    float: right;
    position: relative;
    top: 12px;
}

.table-title {
  display: table;
  width: 100%;
}
.table-title > span {
    display: table-cell;
    white-space: nowrap;
}
.table-title .title-main {
    width: 99%;
}

.flex-title {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
}
.flex-title > span {
    white-space: nowrap;
}
.flex-title .title-main {
    flex-grow: 1;
}

.justify-title {
    text-align: justify;
    line-height: 0;    
}
.justify-title > span {
    white-space: nowrap;
    text-align: left;
    display: inline-block;
    line-height: normal;
}
.justify-title:after {
    display: inline-block;
    width: 100%;
    content: "";
    vertical-align: top;
}