How to add horizontal line with two words on same line as below?

I try to add horizontal line with two word under image but it not give me result i need .
fiddle that show what i try to do as following :

How to show two words (this is test1-this is test2) with horizontal line on same line
my desired result i need actually do as image below :
I need design only red part under image I(slide-2.png)
my problem on part under image slide-2.png that include two words with horizontal line
and parts under two words as image display

Not really sure if this is what you were after but it may help.

<!DOCTYPE HTML>
<html  dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.col2 {
	display:flex;
	max-width:1280px;/* change to suit*/
	margin:auto;
	justify-content:space-between;
}
.col {
	flex:1 0 48%;
	max-width:48%;
	background:#f9f9f9;
	padding:1rem;
}
.col ul {
	margin:1rem;
	padding:0;
}

.line{overflow:hidden;margin:0 0 1em;white-space:nowrap;text-overflow:ellipsis;}
.line span{
	display:inline-block;
	position:relative;
}
.line span:after{
	content:"";
	position:absolute;
	width:999rem;
	top:50%;
	height:1px;
	margin:0 10px;
	border-bottom:1px solid red;
}
</style>
</head>
<body>
<div class="col2">
  <div class="col cola">
  <h2 class="line"><span>Heading for column 1</span></h2>
    <ul>
      <li>Lorem ispum dolor sit amet</li>
      <li>Lorem ispum dolor sit amet</li>
      <li>Lorem ispum dolor sit amet</li>
      <li>Lorem ispum dolor sit amet</li>
      <li>Lorem ispum dolor sit amet</li>
    </ul>
  </div>
  <div class="col colb">
  <h2 class="line"><span>Heading for column 2</span></h2>
    <ul>
      <li>Lorem ispum dolor sit amet</li>
      <li>Lorem ispum dolor sit amet</li>
      <li>Lorem ispum dolor sit amet</li>
      <li>Lorem ispum dolor sit amet</li>
      <li>Lorem ispum dolor sit amet</li>
    </ul>
  </div>
</div>
</body>
</html>

You may need to brush up on your flexbox skills to understand how it works otherwise you won’t be able to manipulate it to fit your purpose.

thank you for reply
this is actually what i need

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.