2 Colour Underline Title

by Glynne Turner

HTML

<div class="hr-container">
  <div class="hr-content">
    <h2>TITLE</h2>
    <span class="hr-ph">
      <div class="hr-p1"> </div>
      <div class="hr-p2"> </div> 
    </span>
    <div>content here</div>
  </div>
</div>

CSS

body{background:#00219D}
*{margin:0; padding:0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif}
.hr-container{color:#fff; width: clamp( fit-content ,70%, 600px); display:block;padding:10px;}
.hr-container h2{}
.hr-content{background:#000; width:clamp(250px, 70%, 600px); padding:10px}
.hr-ph    {display: flex;  }
.hr-p1,.hr-p2{ margin-bottom: 15px;}
.hr-p1{width:33%;border-bottom:2px solid red;}
.hr-p2{width:67%;border-bottom:2px solid #fff}