<div class="subtitle">
  <span class="underline"><span class="underline-hide" contenteditable="true">Some inline<br>magic</span></span>

</div>

:root {
  --border-height: 2px;
  --background-color: #fff;
}

.subtitle {
  text-align: center;
  border: 1px dotted grey;
  padding-bottom: var(--border-height);
  padding: 20px;
  background: var(--background-color);
}
.underline{
  border-bottom: var(--border-height) solid #f00;
  vertical-align: bottom;
}
.underline-hide{
  border: inherit;
  border-color: var(--background-color);
  vertical-align: top;
  
  outline: none;
}
.underline-hide:after{
  content:"";
  display: inline-block;
  padding-bottom:  var(--border-height);
  vertical-align: bottom;
}