Place two H elements side by side just with css-CodePudding

I want to place these two "h" elements, BUT just the two "h" elements (no changes on the rest), side by side using just css, I don't want to change the html. (the reason is that there are two many html templates where I want the same result, so if it's possible to do it with css I can avoid overwriting and editing many html files.)

The "title" I want to achieve is a one-line title composed by the two elements (title and subtitle) separated by a pipe character ( | ) so also I can give one style each.

<div >
    <h1 >title</h1>
    <h2 >subtitle</h2>
  <div >
    <p>Ignatenis molorro mi, que cone ne pliquunt ut odionet dolorerio rectur con cuptae la cori velit, nulluptaspe molorem. | Doloreped quias dia expeditatium resequis aut faccus andem eatia qui de ommo.</p>
  </div>
  <a href="http://hebotek.at" >
    <span>il is antur em quias</span>
  </a>
</div>

Any ideas?

CodePudding user response：

you can put h1 and h2 in a div and apply display:flex to that div like this,

<div >
  <div >
    <h1 >title</h1>
    <h2 >subtitle</h2>
  </div>
  <div >
    <p>Ignatenis molorro mi, que cone ne pliquunt ut odionet dolorerio rectur con cuptae la cori velit, nulluptaspe molorem. | Doloreped quias dia expeditatium resequis aut faccus andem eatia qui de ommo.</p>
  </div>
  <a href="http://hebotek.at" >
    <span>il is antur em quias</span>
  </a>
</div>

.hs {
  display: flex;
  flex-direction: row;
}

CodePudding user response：

You can use their shared class to make them both display inline and use an :after on the heading to add the pipe:

.h1 {
  display: inline;
}

.carousel-item-header:after {
  content: '|'
}

<div >
    <h1 >title</h1>
    <h2 >subtitle</h2>
  <div >
    <p>Ignatenis molorro mi, que cone ne pliquunt ut odionet dolorerio rectur con cuptae la cori velit, nulluptaspe molorem. | Doloreped quias dia expeditatium resequis aut faccus andem eatia qui de ommo.</p>
  </div>
  <a href="http://hebotek.at" >
    <span>il is antur em quias</span>
  </a>
</div>

You can then adjust this to your needs.