how to get that underline below two lines from the text

Question

i have a text that needs an underline but i want that underline to be down below of text with some space

i have an image to show what i required to do

here is the code i have tried

index.html

<div class="line">
<p class="text-center"> <u> Offerings </u> </p>
</div>

Answer 1

Don't use an underline tag but instead use a bottom border like so:

.underline {border-bottom: 1px solid red;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="line text-center">
  <span class="underline"> Offerings </p>
</div>